Sass学习（一）--Sass入门

目录

• 常用命令
• 变量
• 嵌套css规则
• 群组选择器
• 子选择器，相邻，同级选择器
• 属性嵌套
• import导入
• 嵌套导入
• sass注释
• sass乱码解决

常用命令

sass 命令

sass input.scss output.css :将sass文件输出到指定css文件

sass --watch input.scss:output.css:自动监视sass文件更新到指定css文件

sass --watch app/sasss:public/styles:sass监视一个目录里面的sass文件更新到指定目录

sass --update /sass:/css:将一个文件夹的所有scss文件编译到另一个一个目录

sass变量

sass使用“$”声明变量如

代码语言：javascript复制

 $theme-color:#f98;

sass变量有块级作用域，也就是一个{}的变量不能在另一个{}里面使用

代码语言：javascript复制

#main{
    $testColor:red;
    color:$testColor;
    border:1px solid $testColor;
}
section{
    background-color:$testColor;
}

编译时报错

sass引用变量:直接写变量名,sass的一个变量可以被另一个变量引用

代码语言：javascript复制

$themeColor:blue;
#main{
    $testColor:$themeColor;
    color:$testColor;
}
//编译后
#main {
  color: blue; }

嵌套css规则

sass中可实现css的嵌套。 如我们在编写这样的css时

代码语言：javascript复制

#main {
   font-size:15px;
}
#main .left{
    float:left;
}
#main .left ul li {
  color:red;
}

在sass中这样表示

代码语言：javascript复制

#main{
    font-size:15px;
    .left{
        float:left;
        ul{
          li{
              color:red
            }
        }
    }   
}
//编译的结果
#main {
  font-size: 15px; }
#main .left {
    float: left; }
    
#main .left ul li {
      color: red; }

但是上面这种方式不能正常添加伪类 如:hover :active等等

如下

代码语言：javascript复制

article{
    a{
        color:red;
        :hover{
            color:blue
        }
    }
    ul{
        li{
            float:left
        }
    }
}
//预期的结果
article a{
    color:red;
}
article a:hover{
    color:blue
}
........
//实际编译的结果
article a{
    color:red;
}
article a :hover{
    color:blue
}

可以看到实际编译的结果a与伪类选择器中间多了一个空格 表示的是 a元素里面的子元素经过时变蓝，这与我们最初预料的结果不一致

代码语言：javascript复制

<article>
        <a href="#">测试
         <span>324</span>
        </a>
</article>

解决办法：给伪类元素加一个“&”表示“&”表示当前设置样式的选择器

代码语言：javascript复制

article{
    a{
        color:red;
        &:hover{
            color:blue
        }
    }    
}
//编译后
article a{
    color:red;
}
article a:hover{
    color:blue
}

群组选择器

我们在编写css时有时会这样做

代码语言：javascript复制

.con h1,.con h2 .con h3{
 font-weight:400;
}

而在sass中可以简写为

代码语言：javascript复制

.con{
    h1,h2,h3{
        font-weight:400
    }
}

编译结果与上面一致 还可以这样写

代码语言：javascript复制

.nav,aside{
   a{
       color:red
    }
}
//编译后
.nav a,aside a{
    color:red
}

子选择器，相邻，同级选择器

子选择器 > 相邻选择器 同层选择器 ~

代码语言：javascript复制

article{
   ~li{
       color:red
   }
   >section{
     color:blue
   }
    div{
   color:orange
    }
    dl>{
       dt{
          color:red
       }
    }
}
//编译后
article ~ li { color: red; }
article > section {color: blue; }
article   div {color: orange; }
article dl > dt {color: red; }

属性嵌套

在编写css时我们有时会这样写

代码语言：javascript复制

#main{
border-top:1px solid red;
border-left:3px solid blue;
border-bottom:4px solid orange
}

sass中支持属性嵌套，上面的方式可以写出如下

代码语言：javascript复制

#main{
    border:{
        top:1px solid red;
        left:3px solid blue;
        bottom:4px solid orange
    }
}

还可以指定例外规则

代码语言：javascript复制

nav {
    border:1px solid red{
        left:0;
        right:0;
    }
}

import导入

sass支持import导入，可以将一个sass文件内容导入到另一个sass文件，导入文件用@import

如

代码语言：javascript复制

//a.scss
$themeColor:red
//b.css
#main{
    color:$theme.color
}
//c.scss
@import "a.scss";
@import "b.scss";
.test{
    background:$themeColor
}
//编译c.scss的结果
#main {color: red; }
.test {background: red; }

很多时候我们不希望在编译时将那些被导入的sass文件也编译出来，如这里我们就不需要编译a.scss和b.scss但是当我们执行某些命令如将如果文件夹的sass全部编译这时候a和b都会被编译 如果我们不希望他们被编译，直接在文件名前面加下划线即可,导入时去掉下划线。

代码语言：javascript复制

//_a.scss
$themeColor:red
//_b.css
#main{
    color:$theme.color
}
//c.scss
@import "a.scss";
@import "b.scss";
.test{
    background:$themeColor
}
//编译c.scss的结果
#main {color: red; }
.test {background: red; }

import默认值

有些时候我们导入一些sass文件，但某个sass文件可能会跟我当前的sass文件类名冲突，这时候可能会优先执行被导入sass文件的样式

代码语言：javascript复制

//a.scss
$themeColor:red;


//b.scss
$themeColor:blue ;
@import "a.scss";
#main{
    color:$themeColor;
}

在b.scss中故意将import写在变量下面编译后的结果

代码语言：javascript复制

#main {color: red; }//执行了a.scss变量

而如果我们希望a.scss不影响主文件的执行我们可以在a.css的变量后面加上!default 表示默认变量，当主文件没有定义被引入文件相同变量时则使用被引入文件的那个变量，当发生重名时则优先使用主文件的变量

代码语言：javascript复制

//a.scss
$themeColor:red !default;

嵌套导入

sass还支持嵌套导入，在代码块中导入

代码语言：javascript复制

//a.scss
.a{
   color:red
}
//b.scss
.b{import "a.scss"}
//编译b.scss
.b .a { color: red; }

sass注释

sass有两种注释

代码语言：javascript复制

//这种注释不会出现在编译后的css文件中
/*这种注释会出现在编译后的css文件中*/
border 1px /*这种不会出现在css文件中*/ solid  red

sass中文乱码

在编译sass中如果出现中文乱码的问题，找到你的sass安装目录，编辑 engine.rb文件 在require...最后面添加如下代码 Encoding.default_external=Encoding.find('utf-8')

我的sass目录

E:Ruby27-x64librubygems2.7.0gemssass-3.7.4libsass

sass 打包 编程算法 css

0 人点赞