Sass 基础(四)_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

Sass 基础(四)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:23 AM

当你想设置属性值的时候你可以使用字符串插入进来，另一个使用的用法是构建一个选择器。
　　　　　　@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;
　　　　}