sass基础与扩展

Sass是CSS的扩展,为基本语言增添了更为强大的特性。 它允许您使用变量,嵌套规则,混合,内联导入等等,并提供sass,scss两种的语法选择,具有完全CSS兼容的语法,Sass可以很好的帮助你组织好大型样式表,特别是在Compass样式库的帮助下,接下来我们可以体验Sass的特性

变量

可以使用$来定义变量,就像PHP,他可以存储任何你想重用的信息,比如字体,颜色;然后可以在样式表中引用这个变量

// 定义变量
$font-stack:   Helvetica, sans-serif
$master-color: #333

body  
  font: 100%  $font-stack //use font var 使用变量
  color: $master-color //use color var 使用变量

编译后的css

body {  
  font: 100% Helvetica, sans-serif;
  color: #333; }

嵌套

当编写HTML时,你可能注意到它有一个清晰的嵌套和可视的层次结构。Sass允许你嵌套CSS选择器的方式遵循HTML的相同的视觉层次结构。

请注意,过度嵌套的规则将导致维护困难,通常被认为是不好的做法。

nav  
  float: left
  ul
    li
      margin: 0 auto
      width: auto
      list-style: none
    height: 100px


  div
    display: block

编译后的css

nav {  
    float: left;
}

nav ul {  
    height: 100px;
}

nav ul li {  
    margin: 0 auto;
    width: auto;
    list-style: none;
}

nav div {  
    display: block;
}

Import导入

CSS有一个导入选项,允许您将CSS拆分为更小,更容易维护的小文件。 唯一的缺点是每次在CSS中使用@import时,它会创建HTTP请求。 Sass构建CSS @import时,它不需要一个HTTP请求,Sass将接收您要导入的文件,并将其与您要导入的文件合并,以便可以将一个CSS文件提供给Web浏览器

// _reset.sass

html,  
body,  
ul,  
ol  
  margin:  0
  padding: 0
// base.sass

@import reset

body  
  font: 100% Helvetica, sans-serif
  background-color: #efefef
html, body, ul, ol {  
  margin: 0;
  padding: 0;
}

body {  
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixins

CSS中的一些东西有点乏味,特别是与CSS3和许多-webkit,-moz类似前缀存在,mixin允许您创建一组CSS声明,以便在整个网站中重复使用,你甚至可以传递值来使你的mixin更灵活,就像其它语言的函数一样,传递参数返回结果

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

=box-shadow($color)
  -webkit-box-shadow: 10px 10px 5px $color
  -moz-box-shadow: 10px 10px 5px $color

调用mixins

@import "mixins"
div  
  +box-shadow(red)

编译后

div {  
  -webkit-box-shadow: 10px 10px 5px red;
  -moz-box-shadow: 10px 10px 5px red; }

继承Extend/Inheritance

这是Sass最有用的功能之一,使用@extend可以将一组CSS属性从一个选择器共享到另一个。 它有助于保持你的Sass非常简洁,在下面的示例中,error,warning和success将会继承message

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333


.success
  @extend .message
  border-color: green


.error
  @extend .message
  border-color: red


.warning
  @extend .message
  border-color: yellow
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Operators 操作符

在你的CSS中做数学是非常有帮助的,Sass有一些标准的数学运算符,如+, - ,*,/和%

.container
  width: 100%

article[role="main"]  
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]  
  float: right
  width: 300px / 960px * 100%

引用父选择器&

使用嵌套规则的父选择器除默认值以外的其他方式是有用的。例如,你可能想要有一个特殊的样式,当选择器悬停在上面或当body元素有一个特定的类。 在这些情况下,您可以使用&字符明确指定应插入父选择器的位置

a{  
  text-decoration: none;
  &.hover{text-decoration: blink}
}

Nested Properties嵌套属性

CSS有很多属性在“namespaces;”,例如font-family,font-size和font-weight都在字体命名空间。 在CSS中,如果你想在同一个命名空间中设置一堆属性,你必须每次都输入它。 Sass提供了一个快捷方式:只需写一次命名空间,然后嵌套其中的每个子属性。 例如:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

Comments注释

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }  
你的欣赏是我最大的动力

Yanxiong Huang

My name is Yanxiong Huang. graduated from Nanyang middle school.Love Linux,familiar with Node.js,Docker,Serverless... and more Web technology.Contact Me:QQ 31356617;Email:huangaynxiong2013@gmail.com

guangzhou,china http://www.myfreax.com

乐在分享