简介css
SASS 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增长了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更增强大与优雅。 使用 Sass 以及 Sass 的样式库(如 [Compass](http://compass-style.org/))有助于更好地组织管理样式文件,以及更高效地开发项目。 具体可参考中文官网:https://www.sass.hk/
SASS的安装node
先安装Ruby(下载网址:http://www.ruby-lang.org/zh_cn/downloads/) 安装完成后在cmd输入命令:gem install sass 便可安装成功
SASS的四种编译风格gulp
nested:嵌套缩进的css代码,其为默认值 expanded:没有缩进的,扩展的css代码 compact:简洁格式的css代码 compressed:压缩后的css代码
SASS的一些终端命令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的使用ruby
sass的后缀文件名为.scss 定义变量:$变量名:$red:red; 若变量须要嵌入在字符串中(组合形式),则必须写在#{}中:$red:red; .border{border:1px solid #{$red}} 计算功能:能够是两个数值运算,也能够是变量间的运算(两个变量不能相加) .border{margin:20px+30px; padding:#{$border*$border}px;} 复用功能(继承):一个选择器继承另外一个选择器 第一种:[@extend](https://my.oschina.net/extend) xxx .a1{color:blue;} .a2{[@extend](https://my.oschina.net/extend) .a1; font-size:$num+px} 第二种:定义一个mixin块,是能够重用的代码块 [@mixin](https://my.oschina.net/u/3471415) b($b,$f){border:$b+px solid red;font-size:$f+px;} .a3{[@include](https://my.oschina.net/JLXINAO) b(2,13);} 插入文件:使用import命令来插入外部文件 [@import](https://my.oschina.net/u/3201731) '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; }