sass的核心知识及使用

Posted 砌墙的砖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了sass的核心知识及使用相关的知识,希望对你有一定的参考价值。

sass的官方链接地址:htpp://sass-lang.com

参考链接地址:http://www.haorooms.com/post/sass_css

1. 基础语法
1.1 变量
SASS允许使用变量,所有变量以$开头
$blue : blue;
div {
    color:$blue;
}
如果变量需要镶嵌在字符串中,就必须要写在 #{} 中
$side:left;
.rounded {
    border-#{$side}-radius:5px;
}
1.2 计算功能
SASS允许在代码中使用计算式:
body {
    margin:(14px/2);
    top:50px+100px;
    right:$var*10%
}
1.3 嵌套
SASS允许选择器嵌套,比如下面的css代码:
div h1 {
    color:red;
}
//可以写成:
div {
    h1 {
        color:red;
    }
}
//属性也可以嵌套,比如 border-color 属性,可以写成:
p {
    border:{
        color:red;
    }
}
//注意:border后面必须加上冒号
在嵌套的代码块内,可以使用 & 引用父元素,比如 a:hover 伪类,可以写成:
a {
    &:hover {
        color:red
    }
}
1.4 注释
SASS 共有两种注释风格。
//注释,只保留在SASS源文件中
/*注释*/,会保留到编译后的 css 文件中
/*!
    重要注释!,即使是压缩模式编译,也会保留这行注释
*/
2. 代码的重用
2.1 继承
SASS允许使用一个选择器,继承另一个选择器,比如 class1 :
.class1 {
    border:1px solid #ddd;
}
class2 要继承 class1,就要使用 @extend 命令:
.class2 {
    @extend .class1;
    font-size:120%;
 }
2.2 mixin
mixin有点像C语言中的宏(marco),是可以重用的代码块。 使用 @mixin 命令,定义一个代码块:
@mixin left {
    float:left;
    margin-left:10px;
}
使用 @include 命令,调用这个 mixin:
div {
    @include left;
}
mixin的请打之处,在于可以指定参数和缺省值:
@mixin left($value:10px){
    float:left;
    margin-right:$value;
}
使用的时候,根据需要加入参数:
div {
    @include left(20px);
}
下面是一个 mixin 的实例,用来生成浏览器前缀:
@mixin rounded($vert,$horz,$radius:10px){
    border-#{$vert}-#{$horz}-radius:$radius;
    -moz-border-#{$vert}-#{horz}-radius:$radius;
    -webkit-border-#{$vert}-#{$horz}-radius:$radius;
}
使用的时候,可以像下面这样调用:
#navbar li {
    @include rounded(top,left);
}
//或者
#footer {
    @include rounded(top,left,5px);
}
2.3 颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色:
lighten(#cc3,10%);//#d6d65c
darken(#cc3,10%);//#a3a3a3
grayscale(#ccs);//#808080
complement(#cc3);//#33c
2.4 插入文件
@import 命令,用来插入外部文件:
@import "path/filename.scss";
如果插入的是 .css 文件,则等同于css的import命令。
@import "foo.css";
3.高级用法
3.1 条件语句
@if可以用来判断:
p {
    @if 1+1==2{border:1px solid;}
    @if 5<3 {border:2px dotted;}
}
配套的还有 @else 命令:
@if lightness($color) > 30% {
    background-color:#000;
}@else{
    background-color:#fff;
}
3.2 循环语句
SASS 支持 for 循环:
@for $i from 1 to 10 {
    .border-#{$i}{
        border:#{$i}px solid blue;
    }
}
SASS 也支持 while 循环:
$i:6;
    @while $i>0 {
        .item-#{$i} {width:2em * $i;}
        $i:$i - 2;
    }
each 命令,作用与 for 类似:
@each $member in a,b,c,d {
    .#($member) {
        background-image:url("/image/#{$member}.jpg");
    }
}
3.3 自定义函数
SASS 允许用户编写自己的函数:
@function double($n){
    @return $n * 2;
}
#sidebar {
    width:double(5px);
}
4. 使用
可以在屏幕上显示 .scss 文件转化的 css 代码
sass test.scss
如果要将显示结果保存成文件,后面再跟一个 .css 文件名
sass test.scss test.css
SASS提供了四中编译风格:
nested:嵌套缩进的 css 代码,它是默认值
expanded:没有缩进的,扩展的 css 代码
compact:简洁格式的 css 代码
compressed:压缩后的 css 代码
生产环境中,一般使用最后一个选项:
sass --style compressed test.scss test.css
也可以让 SASS 监听某个文件或者目录,一旦源文件有变动,就自动生成编译后的版本:
//watch a file 
sass --watch input.scss:output.css
//watch a directory
sass --watch app/sass:public/stylesheets
SASS的官方网站,提供一个在线转换器,可以用来练习和测试。

用别人的只是点,借花献佛,markdown 不错,用着很顺手。

以上是关于sass的核心知识及使用的主要内容,如果未能解决你的问题,请参考以下文章

Sass入门及知识点整理

Sass控制命令及函数知识整理

三言两语之简单上手sass

sass实用知识点

scss SASS片段

scss Sass片段:响应视频