/*! 数字类型 */ $n1: 1.2; $n2: 12; $n3: 14px; p{ font-size: $n3; } /*! 字符串类型*/ $s1: container; $s2: 'container'; $s3: "container"; .#{$s3}{ font-size: $n3; } /*! Bool类型*/ $bt: ture; $bf: false; /*! Null类型*/ $null: null; body{ @if $null == null{ color: red; } } /*! 颜色类型*/ $c1: blue; $c2: #fff; $c3: rgba(255,255,0,0.5); body{ color: $c3; } $width1: 10px; $width2: 15px; /*== !=所有数据类型都支持,<,>,<=,>=仅仅支持数字类型,*/ span{ width: $width1 - $width2; //空格隔开,不隔开会报错 } a:hover{ cursor: e + -resize; //e-resize是标准做法 } a:before{ content: "A" + bc;//"Abc",第一个有单引号双引号结果就有单引号双引号 } a:before{ content: A + 'bc';// Abc,第一个没有单引号双引号结果就没有单引号双引号 } p{ padding: 3px + 4px auto; } $version: 3; p:before{ content: 'Hello,Sass #{$version}'; } p{ font: 20px / 10px; //运算符最好空格隔开 width: $width2 / 2; width: round($width2) / 2; height: (100px / 2); //不写小括号不能运算 }
@charset "UTF-8"; /*! 数字类型 */ /* line 6, ../sass/demo1.scss */ p { font-size: 14px; } /*! 字符串类型*/ /* line 15, ../sass/demo1.scss */ .container { font-size: 14px; } /*! Bool类型*/ /*! Null类型*/ /* line 26, ../sass/demo1.scss */ body { color: red; } /*! 颜色类型*/ /* line 37, ../sass/demo1.scss */ body { color: rgba(255, 255, 0, 0.5); } /* line 44, ../sass/demo1.scss */ span { width: -5px; } /* line 48, ../sass/demo1.scss */ a:hover { cursor: e-resize; } /* line 52, ../sass/demo1.scss */ a:before { content: "Abc"; } /* line 55, ../sass/demo1.scss */ a:before { content: Abc; } /* line 59, ../sass/demo1.scss */ p { padding: 7px auto; } /* line 63, ../sass/demo1.scss */ p:before { content: "Hello,Sass 3"; } /* line 67, ../sass/demo1.scss */ p { font: 20px / 10px; width: 7.5px; width: 7.5px; height: 50px; }