Sass 基础(四)

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

	      @mixin generate-sizes($class,$small,$medium,$big){
			                  .#{$class}-small {font-size:$small;}
			                  .#{$class}-medium{ font-size:$medium}
			                  .#{$class}-big{ font-size:$big;}
		            }
	      @include gencerate-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;}

      第一个限制,这可能会很删除用于 Sass 变量的插值。

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

        上面的代码编译出来,             error style.scss(Line 5:Undefined variable:"$margin-".)             所以,#{}语法并不能是随处可用的,你也不能在mixin中调用

		            @mixin updated-status{
			                  margin-top:20px;
			                  background:#F00;
		              }
		            $flag:"status";
		            .navigation{
			              @include updated-#{$flag}
		            }

      上面的代码在编译成css时同样会报错;           error style.scss(Line7:Invalid css after"...nclude updated-*":expected"}",was"#{$flag};"         幸运的是,可以使用 @extend 中使用插值。例如:

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

          编译出来的css

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

注释   在Sass 中注释有两种方式     1.类似css 的注释方式,使用“/*”开头,结尾使用“*/”     2.类似JavaScript的注释方式 使用“//”

		    //定义一个占位符
		      %mt5 {
  			          margin-top: 5px;
		      }
		    /*调用一个占位符*/
		    .box {
  			        @extend %mt5;
		      }
	    编译出来的css
	        .box{
		        margin-top:5px;
	    }
		    /*调用一个占位符*/

数据类型     Sass 和JavaScript 语言类型,也具有自己的数据类型,在Sass中包含以下几种数据类型。     数字:如,1,2,13,10px,     字符串:有引号字符串或无引号字符串,如“foo”,'bar',baz;     颜色:如,blue,#04a3f9,rgba(255,0,0,0.5);     布尔值:如,true,false;     空值:如,null;     值列表:用空格或者逗号分开,如,1.em 1em 0.2em Helvetica, Arial, sans-serif。

    SassScrip也支持其他css 属性值(property value),比如Unicode 范围,或者!important 声明。然而     Sass 不会特殊对待这些属性值,一律视为无引号字符串。 字符串     SassS支持CSS的两种字符串类型:     有引号字符串(quoted strings),如“Lucida Grande”,'http://sass-lang.com';     无引号字符串(unquoted strings),如sans-serifbold。     使用 #{ }插值语句 (interpolation) 时,有引号字符串将被编译为无引号字符串,     这样方便了在混合指令 (mixin) 中引用选择器名。

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

    编译为:         body.firefox .header:before(content"hi,Firefox users!";)     值列表         所谓值列表(lists)是指Sass 如何出来css中;       margin:10px 15px 0 0     或者:       font-face:Helvetica,Arial,sans-serif     像上面这样通过空格或者逗号分隔的一系列的值。         Sass列表函数(Sass list functions)赋予了值列表功能(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 不允许这样做。       可以用 () 表示空的列表,这样不可以直接编译成 CSS,比如编译 font-family: ()时,Sass 将会报错。       如果值列表中包含空的值列表或空值,编译时将清除空值,比如 1px 2px () 3px 或 1px 2px null 3px。 加法     在css中能做运算的,到目前为止仅有calc()函数可行,但在Sass 中,运算只是在基本特性之一,在Sass     中可以做各种数学计算。     (一),加法     加法运算是Sass中运算的一种,在变量或属性中都可以做加法运算。如:       .box{           width:px +8in;         }       编译出来css       .box{         width;788px;       }     对于携带不同类型的单位时,在 Sass 中计算会报错      如:       .box{           width:20px +1em;        } 或报错 “Incompatible units: 'em' and ‘px'.” 减法

	    $full-width:960px;
	    $sidebar-width:200px;
	    .content{
		      width:$full-width - $sidebar-width;
	    }

    编译出来的css 如下       .content{ width:760px}     同样的,运算时碰到不同类型的单位时,编译也会报错

		      $full-width:960px;
		      .content{
			          width:$full-width - 1em;
		      }

    编译器报“Incompatible units: 'em' and ‘px’.”错误。 乘法     Sass中的乘法运算和前面介绍的加法和减法运算略有不同,虽然他也能够支持多种单位(比如em ,px,%)       如:.box{           width:10px *2px;         }     编译的时候报错“20px*px isn't a valid CSS value.”错误信息     上面的实例可以修改成:       .box{         width:10px *2;       }     编译出来的css       .box{         width:20px;       } 除法     先来看一个简单的示例       .box{         width:100px / 2;       }     编译出来的css 如下       .box{         width:100px / 2;         }     只需要加上()即可:     .box{       width:(100px / 2)      }     编译出来     .box{         width:50px;     }     下面的示例:     .box{       width:100px / 2 + 2in;     }     编译出来css     .box{       width:242px;     }   在sass除法运算中,当变量进行除法运算时“/”符号也会被自动识别成除法。

	    $width:1000px;
	    $nums:10;
	    .item{
		      width:$width /10;
	    }

  编译出来的css

	    .item{
		      width;100px;
	    }
 
	  .list{ 
	            width:$width / $nums;
	  }

    编译出来的css

	  .item{
		    width:100px;
	  }
	  .list{ 
		    width:100px;
	  }

变量计算     在Sass中除了可以使用数值进行元素之外,还可以使用变量进行计算,     例如:

	      $content-width:720px;
	      $content-width:220px;
	      $gutter:20px;
	    .container{ 
		      width:$conter-width + $sidebar-width + $gutter;
		      margin: 0 auto;
	      }

   编译出来的css

	    .container{
		        width:960px;
		        margin:0 auto;
	    }

数字运算     在Sass运算中数字运算是较为常见的,数字包括前面介绍的,加减乘除。     例如:

	    .box{
		      width:((220px + 720px)-11*20)/12;
	    }

    编译出来的css

	    .box{
		      width:60px;
	    }

颜色运算     所有算数运算都支持颜色值,并且是分段运算的。也就是说,红,绿和蓝各颜色分段单独进行运算。     如:       p{         color:#010203 + #040506;       }     计算公式为01+04 =05, 02 +05 =07 和 03 + 06 = 09,     如此编译出来的css为:       p{         color:#050709;       }     算数运算也能将数字和颜色值一起运算,同样也是分段运算的。       p{         color:#010203 * 2;       }     计算公式为01 * 2 =02, 02 *2 = 04 和03*2 = 06       p{         color:#020306;       } 字符运算   在Sass中可以通过加法符号 “+”来对字符串进行连接。 例如

	  $content:"Hello" + "" +"Sass!";
	   .box:before{
		      content:"#{$content}";
	    }

  编译出来的css

    .box:before{
		      content:"Hello Sass!";
	    }

  除了在变量中做字符串连接运算之外,还可以直接通过 +,把字符串连接在一起。     div{       cursor:e + -resize;     }   编译出来的css     div {       cursor:e-resize;     }    注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧),    结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的    字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。    例如:

	    p:before{
		      content:"Foo" +Bar;
		      font-family:sans- +"serif";
	    }

  编译出来的的css;

	    p:before{
		      content:"foo Bar";
		      font-family:sans-serif;
	    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户画像

H5中的标记方法

要使用H5标记,必须先进行如下的doctype声明,不区分大小写。Web浏览器通过判断文件开头有没有这个声明,来判断解析器和渲染类型是否切换到对应的H5模式。

811
来自专栏LEo的网络日志

go语言坑之for range

3507
来自专栏我的小碗汤

Go语言常见坑

这里列举的Go语言常见坑都是符合Go语言语法的, 可以正常的编译, 但是可能是运行结果错误, 或者是有资源泄漏的风险。

723
来自专栏源哥的专栏

给textarea增加长度的限制

给textarea增加长度的限制     我们知道文本框可以有一个为maxlength的属性,可以限制文本框的长度,当时备注框textarea却没有,那么 要怎...

932
来自专栏Golang语言社区

Golang中container/list包中的坑

但是list包中大部分对于e *Element进行操作的元素都可能会导致程序崩溃,其根本原因是e是一个Element类型的指针,当然其也可能为nil,但是gol...

4419
来自专栏Golang语言社区

Go语言错误与异常处理机制

1 Error接口 Go语言中的error类型实际上是抽象了Error()方法的error接口

1183
来自专栏大史住在大前端

javascript基础修炼(3)—What's this(下)

严格模式是ES5中添加的javascript的另一种运行模式,它可以禁止使用一些语法上不合理的部分,提高编译和运行速度,但语法要求也更为严格,使用use str...

1092
来自专栏mySoul

DOM概述 选取文档元素

有些html标签会有name元素,区别于id,name属性的值不必是唯一的,多个元素可能存在相同的名字。

986
来自专栏Laoqi's Linux运维专列

正则三剑客-sed

与grep不同的是,当使用sed匹配字符串的时候如下: #sed -n ‘//‘p file             // 内填写需要匹配的字符串 例如: #s...

3055
来自专栏小壮和前端

js写插件教程

2161

扫码关注云+社区

领取腾讯云代金券