初学SASS一些注意点

sass特性：

1. 变量：$color:red;
2. 计算：margin：50px+100xp;
3. 嵌套：div{ h2{ font-size:20px; } }
4. 注释：
   标准的CSS注释 /* content */ ，会保留到编译后的文件。在/*后面加一个感叹号即（/*!content*/），表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
   单行注释 // cocntent，只保留在SASS源文件中，编译后被省略。
5. 继承：.class1{color:red} .class2{@extend .class1;font-size:100px}
6. 混合Mixin：

 @mixin font($color,$value){
     color:$color;
     font-size:$value;
 }
 在某个class中调用：`.class1{ @include font(red,20px)}`

1. sass颜色函数
2. 引入外部文件：@import "./style.scss"

**

• SCSS高级用法：
• 支持if,else条件语句
  p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@else {background-color: #fff;}
}
• 支持for,while,each命令

//for循环：
@for $i from 1 to 10 {
　.border-#{$i} {
　　border: #{$i}px solid blue;
　}
}
//while循环：
$i: 6;
@while $i > 0 {
　.item-#{$i} { width: 2em * $i; }
　$i: $i - 2;
}
//each命令：
@each $member in a, b, c, d {
　.#{$member} {
　　　background-image: url("/image/#{$member}.jpg");
　}
}

**

关于SASS切换淘宝镜像源的问题

因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。

$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/

• –remove 删除原gem源
• –add 添加国内淘宝源

查看是否更换成功

打印是否替换成功
gem sources -l

更换成功后打印如下
*** CURRENT SOURCES ***
https://gems.ruby-china.org/

SASS的编译

//编译格式
sass --watch input.scss:output.css --style compact

//编译添加调试map
sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息
sass --watch input.scss:output.css --debug-info

• – input.scss 需要编译的文件
• – output.css 输入编译完成的文件名
• – style表示解析后的css是什么排版格式;
• – sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

sass内置有四种编译格式：nested、expanded、compact、compressed

未编译：

.main{
    width:100px;
    height:100px;
    &-content{
        width:50px;
        height:50px;
    }
}

编译后：

nested（嵌套） 编译排版格式：

/*命令行内容*/
sass style.scss:style.css --style nested

/*编译完成后的css格式*/
.main{
    width:100px;
    height:100px;
    .main-content{
        width:50px;
        height:50px;
    }
}

expanded（扩展） 编译排版格式：

/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译完成后的css格式*/
.main{
    width:100px;
    height:100px;
}
.main-content{
    width:50px;
    height:50px;
}

compact（紧凑） 编译排版格式：

/*命令行内容*/
sass style.scss:style.css --style compact

/*编译完成后的css格式*/
.main{width:100px;height:100px;}
.main-content{width:50px;height:50px;}

compressed （压缩） 编译排版格式：

/*命令行内容*/
sass style.scss:style.css --style compressed 

/*编译完成后的css格式*/
.main{width:100px;height:100px;}.main-content{width:50px;height:50px;}

变量的使用

变量声明：（可在规则块内外部声明，但是在内部使用，则仅限规则块内部使用，外部无法使用，变量名的命名可以是$nav-color也可以是$nav_color两个是一样的，即变量声明为$nav-color，使用时为$nav_color也是可以识别的）

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
.box {
  border: 1px solid $highlight-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}
.box {
  border: 1px solid #F90;
}

父选择器的标识符&

//代码块
$color:red;
article a {
  color: $color;
  &:hover { color: $color }
}
#content aside {
  color: $color;
  body.ie & { color: $color }
}
//编译之后
article a { color: red }
article a:hover { color: red }
#content aside {color: red};
body.ie #content aside { color: red }