乐趣区

关于前端:关于SASS

jiezi

简介 

SASS 是一款强化 CSS 的辅助工具，它在 CSS 语法的根底上减少了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级性能，这些拓展令 CSS 更加弱小与优雅。应用 Sass 以及 Sass 的款式库（如 [Compass](http://compass-style.org/)）有助于更好地组织治理款式文件，以及更高效地开发我的项目。具体可参考中武官网：https://www.sass.hk/

SASS 的装置 

 先装置 Ruby（下载网址：http://www.ruby-lang.org/zh_cn/downloads/）装置实现后在 cmd 输出命令：gem install sass
即可装置胜利

SASS 的四种编译格调 

nested：嵌套缩进的 css 代码，其为默认值
expanded：没有缩进的，扩大的 css 代码
compact：简洁格局的 css 代码
compressed：压缩后的 css 代码

SASS 的一些终端命令 

 查看 sass 文件的 css 内容，在 cmd 中输出命令：sass 文件名.scss
把 sass 文件转为 css 文件, 在 cmd 中输出命令：sass 文件名.scss 转换后的文件名.css（若想以某种格调压缩）：sass --style 格调名称 xxx.scss xxx.css
监听文件，一旦源文件有变动，会主动生成编译后的版本。在 cmd 中输出命令：sass --watch xxx.scss:xxx.css

更多命令的用法可通过输出命令 sass --help 来获取帮忙。也可应用 nodejs 下的 gulp 模块来编译 sass

SASS 的应用 

sass 的后缀文件名为.scss

定义变量：$ 变量名：$red:red;
若变量须要嵌入在字符串中（组合模式），则必须写在 #{} 中：$red:red; .border{border:1px solid #{$red}}

计算性能：能够是两个数值运算，也能够是变量间的运算（两个变量不能相加）.border{margin:20px+30px; padding:#{$border*$border}px;}

复用性能（继承）：一个选择器继承另一个选择器
第一种：@extend xxx 
.a1{color:blue;}
.a2{@extend .a1; font-size:$num+px}
第二种：定义一个 mixin 块，是能够重用的代码块
        @mixin b($b,$f){border:$b+px solid red;font-size:$f+px;}
        .a3{@include b(2,13);}
        
插入文件：应用 import 命令来插入内部文件
@import 'xxx.scss';（若插入是 scss 文件则把编译后的代码文件插入其中。若插入是 css 文件，则相当于 @import url(xxx.css) 命令）条件语句：@if / @if-else / @if-else if
.a4{@if $num==5{color:blue;}
    @else if $num==4{color:red;}
 }
 
循环语句：@for / @while / @each
@for:
@for $i from 1 to 10{.a5_img#{$i}{background-image:url('img#{$i}.png');
    }
}
@while:
$j:9;
@while $j>0{.a6_img${$j}{background-image:url('img#{$i}.png');
    }
    $j:$j-1;
}
@each:
@each $item in 1,2,3,4,5{.a6_img#{$item}{background-image:url('img#{$item}.png');
    }
}

函数：@function
@function a7($r){@return $r*2;}
.a8{border:#{a7(2)}px solid #000;
}

选择器（标签）嵌套：div{
    h1{color:red;}
}
也能够用 '&' 代表嵌套规定外层的父选择器
a {&:hover { text-decoration: underline;}
    body.firefox & {font-weight: normal;}
}

属性嵌套：（便于管理同一类管制的属性）a{
    font: {
        family: fantasy;
        size: 30em;
        weight: bold;
    }
}

插值语句 #{}:
$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}
退出移动版