sass笔记-入门

---

sass与scss的区别

sass严格按缩进式，不带打括号和分号，scss与css类似

Paste_Image.png

---

编译

命令编译
单个文件编译
sass <要编译的sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
多文件编译
Sass sass/:css/
动态编译
Sass –watch <要变异的sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
GUI页面工具编译
koala/docegit
自动化编译
grunt/gulp
常见编译错误
在Sass的编译的过程中，是不支持“GBK”编码的。在项目中文件命名或者文件目录命名不要使用中文字符

---

不同样式风格的输出方法

嵌套Nested 展开expanded 紧凑compact 压缩 compressed

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

---

变量

/*局部变量和全局变量*/
/*选择器嵌套*/
nav {
    a {
        color: red;
        header & {
            color: green;
        }
    }
}
nav a {
    color: red;
}
header nav a {
    color: green;
}
/*属性嵌套*/
.box {
    border: {
        top: 1px solid red;
        bottom: 1px solid green;
    }
}
.box{
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
/*伪类嵌套*/
.clearfix {
    &:before,
    &:after {
        content:"";
        display: table;
    }
}
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}

---

混合宏

/*定义*/
/*单个参数*/
@mixin border-radius($radius:3px) {
    -webkit-border-radius:$radius;
    border-radius: $radius;
}
button {
    /*调用*/
    @include border-radius(3px);
}
/*多个参数*/
@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));
}

.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)
}

---

继承

.btn {
    border: 1px solid #ccc;
}
.btn-primary {
    @extend .btn
}

---

占位符

%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码

 %mt5 {
    margin-top: 5px;
 }
.block{
    @extend %mt5;
}

---

插值

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

---

字符串

注意引号

@mixin firefox-message($selector){
    body.firefox #{$selector}:brfore{
        content:"hi";
    }
}
@include firefox-message(".header");

---

运算

（不同单位相加在编译时还会报错）（注意运算符号前后加空格）

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

/乘法（两个值单位相同时，只需要为一个数值提供单位即可）/
/除法！/
/*
"/"符号被当作除法运算符时有以下几种情况：

• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。*/