scss用法

//定义变量：
$width: 300px !default; //!default 表示默认值
//全局变量和局部变量
$fontSize: 12px; //全局范围内使用

body {
    font-size: $fontSize;
}

//局部变量
$color:orange !default;
 .block {
    color: $color; //调用局部变量
}

em {
    $color: red; //定义的局部变量（全局变量的影子）

    a {
        color: $color; //调用局部变量
    }
}

//混合宏 @mixin
@mixin border-radius {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

//@mixin是用来声明混合宏的关键字
//声明带参数的混合宏
@mixin border-radius($radius: 5px) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

//调用混合宏  通过@include来调用声明好的混合宏
@mixin border-radius {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

button {
    @include border-radius;
}

//编译出来的css
button {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

//传一个不带值的参数
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

button {
    @include border-radius(3px);
}

//编译出来的css
button {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

//传一个带值的参数
@mixin border-radius($radius: 3px) {
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

.btn {
    @include border-radius;
}

//编译出来的css
.btn {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

//混合宏的参数-传多个参数
@mixin center($width, $height) {
    width: $width;
    height: $height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -($height) / 2;
    margin-left: -($width) / 2;
}

.box {
    @include center(500px, 300px);
}

//编译出来的css
.box {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -250px;
}

//scss中使用 @extend 来继承已存在的类样式块，从而实现代码的继承
.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
//在scss中的继承，可以继承样式块中所有样式代码，而且编译出来的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-color: orange;
    color: #fff;
}

//占位符 %  %声明的代码，如果不被 @extend 调用的话，它是不会被编译的，
//不会产生任何代码，也就是不会占用css文件大小，这是和继承最大区别
%mt5 {
    margin-top: 5px;
}

%pt5 {
    padding-top: 5px;
}

.btn {
    @extend %mt5;
    @extend %pt5;
}

.block {
    @extend %mt5;

    .span {
        @extend %pt5;
    }
}

//编译出来的css
//通过@extend调用的占位符，编译出来的代码会将相同的代码合并在一起
.btn,
.block {
    margin-top: 5px;
}

.btn,
.block span {
    padding-top: 5px;
}

//插值 #{}
$properties: (margin, padding);

@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}

.login-box {
    @include set-value(top, 14px);
}

//编译出来的css
.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

//scss运算
//加法  携带不同类型的单位，在scss中计算会报错
.box {
    width: 20px + 20px;
}

//减法
$full-width: 960px;
$sidebar-width: 200px;

.content {
    width: $full-width - $sidebar-width;
}

//编译出来的css
.content {
    width: 760px;
}

//乘法
.box {
    width: 10px * 2px;
}

//上方写法会报错，两个值的单位相同时，只需要为一个数值提供单位即可。如下：
.box {
    width: 10px * 2;
}

//除法
.box {
    width: (100px / 2);
}

//编译出来的css
.box {
    width: 50px;
}

/*
”/ ”符号被当作除法运算符时有以下几种情况：
 1、如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
 2、如果数值被圆括号包围。
 3、如果数值是另一个数学表达式的一部分。
*/
p {
    font: 10px/8px; // 纯 CSS，不是除法运算
    $width: 1000px;
    width: $width/2; // 使用了变量，是除法运算
    width: round(1.5) / 2; // 使用了函数，是除法运算
    height: (500px/2); // 使用了圆括号，是除法运算
    margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

//编译出来的css
p {
    font: 10px/8px;
    width: 500px;
    height: 250px;
    margin-left: 9px;
}

//变量计算
$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;
.container {
    width: $content-width + $sidebar-width + $gutter;
    margin: 0 auto;
}
//编译出来的css
.container {
    width: 960px;
    margin: 0 auto;
}
//数字运算
//包括加减乘除的运算，还可以通过括号来修改运算的先后顺序
.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;
}
/*
@if 该指令可以根据条件吃力样式块，如果条件为true返回一个样式块，
反之返回另外一个样式块。还可以配合@else if 和@else一起使用
*/
@mixin blockOrHidden($boolean: true) {
    @if $boolean {
        @debug "$boolean is #{$boolean}";
        display: block;
    } @else {
        @debug "$boolean is #{$boolean}";
        display: none;
    }
}
.block {
    @include blockOrHidden;
}
.hidden {
    @include blockOrHidden(false);
}
//编译后的css
.block {
    display: block;
}
.hidden {
    display: none;
}
/*
@for循环的简单用法 @for有两种方式：
1、@for $i from <start> through <end>
2、@for $i from <start> to <end>
$i 表示变量
start 表示起始值
end 表示结束值
两种方式的区别是through表示包括end这个数，而to则不包括end这个数
*/
@for $i from 1 through 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}
//编译后的css
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}
//to关键字示例
@for $i from 1 to 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}
//编译后的css
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
/*
@while指令会生成不同的样式块，直到表达式值为false 时停止循环。
这个和@for指令很相似，只要@while后面的条件为true就会执行。
*/
$types: 4;
$type-width: 20px;
@while $type > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $type: $type-1;
}
//编译后的css
.while-4 {
    width: 24px;
}
.while-3 {
    width: 23px;
}
.while-2 {
    width: 22px;
}
.while-1 {
    width: 21px;
}
/*@each 循环就是去遍历一个列表，然后从列表中取出对应的值
@each指令形式   @each $val in <list>
$var 就是一个变量名，<list> 是一个 SassScript 表达式，他将返回一个列表值。
变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。
*/
$list: adam john wynn mason kuroir; //$list 就是一个列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}
//编译后的css
.author-bio .photo-adam {
    background: url("/images/avatars/adam.png") no-repeat;
}
.author-bio .photo-john {
    background: url("/images/avatars/john.png") no-repeat;
}
.author-bio .photo-wynn {
    background: url("/images/avatars/wynn.png") no-repeat;
}
.author-bio .photo-mason {
    background: url("/images/avatars/mason.png") no-repeat;
}
.author-bio .photo-kuroir {
    background: url("/images/avatars/kuroir.png") no-repeat;
}
/*
字符串函数
unquote($string):删除字符串两端的引号，没有引号返回原始字符串，无法去除中间的引号
queto($string):给字符串添加引号，自身带有引号会统一换成双引号""
*/
.test1 {
    content: unquote("Hello Sass!");
}
.test2 {
    content: unquote("'Hello Sass!");
}
.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}
//编译后的css
.test1 {
    content: Hello Sass!;
}

.test2 {
    content: "Hello Sass!; 
}  
.test3 {
    content: I" m Web Designer;
}

.test4 {
    content: "Hello Sass!";
}

.test5 {
    content: "Hello Sass!";
}

.test6 {
    content: Hello Sass;
}
/*
To-upper-case()函数将字符串小写字母转换成大写的字母
To-lower-case()函数将字符串转换成小写字母
*/
.test {
    text: to-upper-case(aaaaa);
    text: to-upper-case(aA-aAAA-aaa);
}
//编译后的css
.test {
    text: AAAAA;
    text: AA-AAAA-AAA;
}
.test {
    text: to-lower-case(AAAAA);
    text: to-lower-case(aA-aAAA-aaa);
}
//编译后的css
.test {
    text: aaaaa;
    text: aa-aaaa-aaa;
}
/*
数字函数
percentage($value):将一个不带单位的数转换成百分比值
round($value):将数值四舍五入，转换成一个最接近的整数
ceil($value):将大于自己的小数转换成下一位整数
floor($value):将一个数去除他的小数部分
abs($value):返回一个数的绝对值
min($numbers...):找出几个数值之间的最小值
max($numbers...):找出几个数值之间的最大值
random():获取随机数
*/
.footer {
    width: ceil(12.3px);
}
.footer {
    width: 13px;
}
.footer {
    width: floor(12.3px);
}
.footer {
    width: 12px;
}
.footer {
    width: abs(-12.3px);
}
.footer {
    width: 12.3px;
}