10天精通Sass 之 Sass基本语法二

来源：互联网发布：鞋子淘宝试用报告范文编辑：程序博客网时间：2024/04/30 17:15

混合宏——声明混合宏

当样式变得越来越复杂，需要重复大段的样式，声明一个个变量已经不能满足我们的需求时，这时Sass中的混合宏就会变得非常有意义。Less中同样有这部分类容，有带参数的混合和不带参数的混合。

1、声明混合宏

不带参数混合宏

在Sass中，使用”@mixin”来声明一个混合宏，如：

@mixin border_radius {    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    border-radius: 10px;}

@mixin是用来声明混合宏的关键词，border-radius是混合宏的名称。
定义混合宏，不会编译在CSS中，只有被调用时，才会编译。
使用@include调用混合宏

div {    @include border-radius;}

编译的CSS如下:

div {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;}

2、带参数的混合宏

@mixin border_radius($radius) {    -webkit-border-radius: $radius;    -moz-border-radius: $radius;    border-radius: $radius;}

调用混合宏

div{    @include border-radius(5px);}

编译的CSS如下:

div {  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}

3、带默认值的混合宏

@mixin border_radius($radius:10px) {    -webkit-border-radius: $radius;    -moz-border-radius: $radius;    border-radius: $radius;}

调用混合宏

div {   @include border_radius; }

编译后的CSS如下:

div {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;}

当项目中很多地方都需要用到10px的border-radius时，我们可以设置默认值。

在需要特别设置的值时，只需要给其传递参数即可。

如:

div {    @include border_radius(50%);}

编译后的CSS如下:

div {  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  border-radius: 50%;}

混合宏的参数——多个参数
sass混合可以传递多个参数，如:

@mixin box($width,$height) {    width:$width;    height: $height}

调用混合宏:

div{    @include box(200px, 300px);}

编译后的css为:

div {  width: 200px;  height: 300px;}

同样，多个参数时，也可以设置默认值。

有一个特别的参数“…”.当混合宏传递的参数过多时，可以使用该参数替代，如:

@mixin box-shadow($shadows...){  @if length($shadows) >= 1 {    -webkit-box-shadow: $shadows;    box-shadow: $shadows;  } @else {    $shadows: 0 0 2px rgba(#000,.25);    -webkit-box-shadow: $shadow;    box-shadow: $shadow;  }}

调用混合宏:

.box {  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));}

编译后的css:

.box {  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);}

4、复杂的混合宏
混合宏中可以有逻辑关系.比LESS的匹配高级一点

@mixin triangle($direction, $width:5px, $color:#ccc){    border-width: $width;    width:0;    height:0;    overflow:hidden;    @if($direction == "top"){        border-color:  transparent transparent $color transparent;        border-style:  dashed dashed solid dashed;    }@else if($direction == "bottom"){        border-color: $color transparent transparent transparent;        border-style: solid dashed dashed dashed;    }@else if($direction == "left"){        border-color: transparent $color transparent transparent;        border-style: dashed dashed solid dashed;    }@else{        border-color: transparent transparent transparent $color;        border-style: dashed dashed dashed solid;    }   }

以上代码用于生成三角形。通过判断$direction的值来设置不同的样式。

调用混合宏:

div{    @include triangle("top")}

编译后的CSS:

div {  border-width: 5px;  width: 0;  height: 0;  overflow: hidden;  border-color: transparent transparent #ccc transparent;  border-style: dashed dashed solid dashed;}

混合宏的不足

混合宏在实际编码中带来很多方便，特别是对于重复的代码块。但是其最大的不足之处在于会生成冗余的代码块。

如:

@mixin box($width:50px,$height:50px) {    width:$width;    height: $height}div{    @include box;}img{    @include box;}

编译出来的css:

div {  width: 50px;  height: 50px;}img {  width: 50px;  height: 50px;}

调用相同的混合宏，但是不能智能的将样式代码合并在一起。

扩展和继承

CSS中存在继承，子元素比继承父元素的样式。同样，sass中也存在继承。

.btn {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}.btn-primary {  background-color: #f36;  color: #fff;  @extend .btn;}.btn-second {  background-color: orange;  color: #fff;  @extend .btn;}

编译出来的CSS:

.btn, .btn-primary, .btn-second {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}.btn-primary {  background-color: #f36;  color: #fff;}.btn-second {  background-clor: orange;  color: #fff;}

在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器.

占位符 %placeholder

占位符可以取代CSS中基类造成的代码冗余的情景，如上个例子中，即使.btn不被调用，也会在CSS中编译出来。而如果使用%placeholder声明，如果不被@extend调用的话，不会产生任何代码，这一点，在LESS中在声明时，加一个括号也可以实现，即:.btn(){};

如:

%border-radius{  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;}

这段代码在没有被@extend调用之前，不会在CSS中产生任何代码。

调用:

div{    @extend %border-radius;}

编译后的CSS：

div {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;}

混合宏&继承&占位符

Sass中的混合宏：
混合宏不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。但是，如果代码中涉及变量，建议使用混合宏来创建相同的代码块，因为混合宏可以传递参数。

Sass中继承
使用继承时，编译出来的CSS会将使用继承的代码合并到一块，通过组合选择器的方式向大家展现，但是它不能传参数。

占位符
编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。

总结：

方式混合宏继承占位符声明方式 @mixin .class %placeholder 调用方式 @include @extend @extend 使用环境如果相同代码块需要在不同的环境传递不同的值时，可以通过混合宏来定义重复使用的代码块。==不足==：不会自动合并相同的代码块，造成代码冗余。如果相同代码块不需要传递不同的值，并且此代码块已在Sass中定义，此时可以通过Sass的继承来调用已存在的基类。使用继承会将相同的代码块合并在一起。 ==不足==：如果基类，不存在于HTML结构时，不管调用与否，都会在CSS中编译出基类对应的代码样式占位和继承类似，不管在不调用时，不会再CSS中产生代码。

插值

$properties: (margin, padding);@mixin set-value($side, $value) {    @each $prop in $properties {        #{$prop}-#{$side}: $value;    }}.login-box {    @include set-value(top, 14px);}$property: (left, right, top, bottom);@mixin set-pro($side, $value){    @each $prop in $property{        #{$side}-#{$prop}: $value;    }}.box{    @include set-pro(margin, 20px)}

编译出来的CSS：

.login-box {  margin-top: 14px;  padding-top: 14px; }.box {  margin-left: 20px;  margin-right: 20px;  margin-top: 20px;  margin-bottom: 20px; }

@each in 和JS中的for in类似，遍历整个数组。

当想要设置属性值的时候可以使用字符串插入进来，另一个有用的用法是构建一个选择器。

@mixin generate-sizes($class, $small, $medium, $big) {    .#{$class}-small { font-size: $small; }    .#{$class}-medium { font-size: $medium; }    .#{$class}-big { font-size: $big; }}@include generate-sizes("header-text", 12px, 20px, 40px);

编译出来的CSS：

.header-text-small { font-size: 12px; }.header-text-medium { font-size: 20px; }.header-text-big { font-size: 40px; }

{}语法并不能随便使用:

$margin-big: 40px;$margin-medium: 20px;$margin-small: 12px;@mixin set-value($size) {    margin-top: $margin-#{$size};}.login-box {    @include set-value(big);}

这样使用不会得到我们期望的结果，在第五行会报错。因为#{}语法在这里不能被使用。

{}语法不能在冒号之后被使用。

对上面的代码稍作更改:

$margin-big: 40px;$margin-medium: 20px;$margin-small: 12px;@mixin set-value($size) {    margin-#{$size}: 19px;}.login-box {    @include set-value(big);}

编译出来的CSS：

.login-box {  margin-big: 19px; }

这样可以作用之后，既然在:右侧不行，那么使用@include呢？很容易会想到尝试下面这样的写法。

$margin-big: 40px;$margin-medium: 20px;$margin-small: 12px;@mixin set-value($size) {    @include $margin-#{$size}}

编译时同样报错：Error: Invalid CSS after ” @include “: expected identifier, was “margin-#{size}”

尽管以上做法依旧行不通，幸运的是，我们可以在@extend中使用插值，例如:

%updated-status {    margin-top: 20px;    background: #F00;}.selected-status {    font-weight: bold;}$flag: "status";.navigation {    @extend %updated-#{$flag};    @extend .selected-#{$flag};}

编译后的CSS：

.navigation {    margin-top: 20px;    background: #F00;}.selected-status, .navigation {    font-weight: bold;}

SASS中的注释规则和LESS一样。可以使用”//”或者是以”/*”开头，以”*/”结尾。
两者的区别在于，//的注释不会在编译后的CSS中显示出来。
而以”/*”开头，以”*/”结尾的注释会在编译后的CSS中显示。

数据类型

Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：

数字: 如，1、 2、 13、 10px；
字符串：有引号字符串或无引号字符串，如，”foo”、 ‘bar’、 baz；
颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
布尔型：如，true、 false；
空值：如，null；值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

SassScript 也支持其他 CSS 属性值（property value），比如 Unicode 范围，或 !important 声明。然而，Sass 不会特殊对待这些属性值，一律视为无引号字符串 (unquoted strings)。

字符串

Sass支持CSS的两种字符串类型：

有引号字符串，如: “http://www.baidu.com”
无引号字符串，如: sans-serif
在编译CSS文件时不会改变其类型。只有一种情况例外，使用 #{}插值语句时，有引号字符串被编译为无符号字符串，方便在混合指令中引用选择器名。

@mixin message($selector) {  body #{$selector}:before {    content: "Hi, Firefox users!";  }}@include message(".header");

编译出来的CSS：

body .header:before {  content: "Hi, Firefox users!";}

值列表

所谓值列表是指Sass如何处理CSS中:

margin: 10px 20px 20px 30px;

或者:

box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);

向这种用逗号或者是空格分隔的一系列的值。

独立的值可以被视为只包含一个值的值列表。

Sass列表函数赋予了值列表更多功能：
1. nth函数（nth function）可以直接访问值列表中的某一项；
2. join函数（join function）可以将多个值列表连结在一起；
3. append函数（append function）可以在值列表中添加值；
4. @each规则（@each rule）则能够给值列表中的每个项目添加样式；

值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。如果内外两层值列表使用相同的分隔方式，要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时，Sass 不会添加任何圆括号，因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个值列表的值列表，而后者是包含四个值的值列表。

可以用 () 表示空的列表，这样不可以直接编译成 CSS，比如编译 font-family: ()时，Sass 将会报错。如果值列表中包含空的值列表或空值，编译时将清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。

1 0