Sass指南
来源:互联网 发布:淘宝联盟新手图片 编辑:程序博客网 时间:2024/05/23 23:13
为什么会出现CSS预处理器
CSS不能用于编程,即没有变量,没有控制语句…加上这些东西呢,CSS预处理器就诞生了
Sass vs Less
最广为人知的 css 预处理器是 Sass 和 Less,孰优孰劣也都各执己见,总体是选择 Sass 的人多于 Less
然而,真正使我选择 Sass 的原因是即将发布的 Bootstrap 4.0 放弃 Less 选择 Sass
Sass 简介
Sass 是用 Ruby 写的,但与 Ruby 的语法没有一丁点关系,所以学 Sass 不用学 Ruby,只是需要安装 Ruby 而已
Sass 是 CSS3 的扩展,是 CSS3 的超集,也就是正常的CSS就是合法的Sass
安装
安装 Ruby
已说过,Sass 是由 Ruby 编写的,所以先安装 Ruby,不同操作系统安装方法不同,Ruby 官网下载地址:https://www.ruby-lang.org/en/documentation/installation/
检测 Ruby 是否安装成功
ruby -v
或者
ruby --version
安装Sass
输入如下命令
gem install sass
检测是否安装成功
sass -v
或
sass --version
升级 Sass 版本
sudo gem update sass
Sass 语法
语法格式
Sass有两种语法格式,一种是以 .sass 作为扩展名,这种语法对空格敏感,不用花括号,不用分号
#div width: 100px height: 200px
另一种是以 .scss 作为扩展名,又出现了熟悉的花括号和分号
#div { width: 100px; height: 200px; }
选择哪一种语法?当然是后者
编译风格
共有四种编译风格
(1)nested:嵌套缩进的css代码,它是默认值(2)expanded:没有缩进的、扩展的css代码(3)compact:简洁格式的css代码(4)compressed:压缩后的css代码
使用方法
sass 001.scss 001.css --style compressed
或
sass --style compressed 001.scss 001.css
如果像下面这样使用
sass 001.scss
则会将编译后的 .css 输出显示在命令行
变量
变量名以 $ 符号开头,可包含所有可用作 CSS 类名的字符,包括下划线和中划线
$width: 100px;#div { width: $width; height: 200px; }
$width: 2px;#div { border : $width solid red;}
如果变量需要嵌在字符串中,则变量需要放在 #{} 中
$dir: top;#div { border-#{$dir} : 2px solid red;}
如果变量定义在 CSS 规则块之内,则只在此规则块之内有效
变量名中不区分中划线和下划线,即$link_color
与$link-color
相同
$link-color: red;#div { color: $link_color;}
嵌套
选择器嵌套
#div { h1 { color: red; } article { p { color: green } }}
编译后
#div h1 { color: red; }#div article p { color: green; }
父选择器标识符&
a { color: red; &:hover { color: green; }}
编译后
a { color: red; } a:hover { color: green; }
a { color: red; p & { color: green; }}
编译后
a { color: red; } p a { color: green; }
群组选择器的嵌套
aritcle { h1, h2, h3, h4 {color: #ccc}}
编译后
aritcle h1, aritcle h2, aritcle h3, aritcle h4 { color: #ccc; }
aritcle, aside { h1, h2 {color: #ccc}}
编译后
aritcle h1, aritcle h2, aside h1, aside h2 { color: #ccc; }
组合选择器
组合选择器:> + ~,无需使用父选择器标识符 &
可以用在外层选择器的后边,也可以用在里层选择器的前边
aritcle { > section {color: red} + section {color: green} ~ section {color: blue} dl > { dt {color: #ccc} dd {color: #666} }}
编译后:
aritcle > section { color: red; }aritcle + section { color: green; }aritcle ~ section { color: blue; }aritcle dl > dt { color: #ccc; }aritcle dl > dd { color: #666; }
属性嵌套
属性也可以嵌套,嵌套规则是:用 :
把属性名从中划线-
的地方断开,在根属性后边添加一个冒号,紧跟一个{}
块,把子属性部分写在{}
块中
nav { margin: { top: 10px; left: 5px; }}
编译后:
nav { margin-top: 10px; margin-left: 5px; }
nav { margin: 15px { top: 10px; left: 5px; }}
编译后
nav { margin: 15px; margin-top: 10px; margin-left: 5px; }
@import
Sass 重写了 @import
原生的 CSS 执行到 @import 时才会去下载其导入的 CSS 文件
Sass 的 @import 在生成 CSS 文件时就把相关文件导入进来
使用 Sass 的 @import 不需要指定导入文件的扩展名,即可以省略 .scss 或 .sass
Sass 允许 @import 写在 CSS 规则内
Sass 有一个文件命名约定,对于不需要生成对应的独立 CSS 文件,只作为 @import 编写的 Sass 文件,被称为局部文件,局部文件名以下划线开头,导入局部文件时,可以省略该下划线
以下三种情况会使用 CSS 原生 @import
(1)被导入的文件名以 .css 结尾(2)被导入的文件名是一个 URL 地址,如 http://www.xxx.com/style/xxx.css(3)被导入的文件名是 CSS 的 url() 值
!default
!default 用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值
$width: 10px;$width: 20px !default;$height: 10px;$height: 20px;#div { width: $width; height: $height;}
编译后:
#div { width: 10px; height: 20px; }
注释
CSS 标准格式的注释是: /* … */
Sass还有一个注释,叫静默注释
// 注释内容
这种注释不会出现在生成的 CSS 文件中
混合器
变量是为了重用某个值,混合器则可以重用大段样式
混合器使用 @mixin 定义,使用 @include 引用这个混合器
@mixin rounded-corners { -moz-border-radiux: 5px; -webkit-border-radius: 5px; border-radiux: 5px;}#div { color: red; @include rounded-corners;}
编译后
#div { color: red; -moz-border-radiux: 5px; -webkit-border-radius: 5px; border-radiux: 5px; }
在混合器中也可以使用 CSS 规则
@mixin rounded-corners { -moz-border-radiux: 5px; -webkit-border-radius: 5px; border-radiux: 5px; a { color: red; } & span { color: blue; }}#div { color: red; @include rounded-corners;}
编译后
#div { color: red; -moz-border-radiux: 5px; -webkit-border-radius: 5px; border-radiux: 5px; } #div a { color: red; } #div span { color: blue; }
可以给混合器传参,参数可以有默认值
@mixin rounded-corners($size, $color, $color2: red) { -moz-border-radiux: $size; -webkit-border-radius: $size; border-radiux: $size; a { color: $color; } & span { color: $color2; }}#div { color: red; @include rounded-corners(10px, green);}
编译后
#div { color: red; -moz-border-radiux: 10px; -webkit-border-radius: 10px; border-radiux: 10px; } #div a { color: green; } #div span { color: red; }
选择器继承
选择器继承是指一个选择器可以继承另一个选择器定义的样式,继承使用 @extend
.error { color: red; font-size: 16px;}.syntax { background-color: blue; @extend .error;}
编译后
.error, .syntax { color: red; font-size: 16px; }.syntax { background-color: blue; }
表达式
只要能放在属性右边的都可以称为表达式,如一个简单的值 bold 或 5px,也可以是值的列表 2px solid #ccc
表达式中不仅能包含变量,还可以包含数学运算符
数据类型
CSS 属性或 Sass 变量中的每个值都有一个类型,类型不同,动作方式也不同,Sass 能理解所有的这些类型
字符串
包括 无引号字符串 和 有引号字符串,bold、auto、center 属性于无引号字符串,”microsoft yahei” 属于有引号字符串
字符串连接运算符是:”+”。如果两个字符串都是无引号字符串,则结果也是无引号字符串;如果两个字符串都是有引号字符串,则结果也是有引号字符串;如果一个是有引号字符串,一个是无引号字符串,则结果与是否有引号取决于左边的字符串
div + p divp"div" + p "divp"div + "p" divp
数值
数值包括两部分:实际的数值及单位
当对带有单位的数值做乘法和除法运算时,单位也一起做乘法和除法运算,如
5em*4px 20em*px16px/1em 16px/em
这有什么用呢?可以用在单位转换,如 16px/em 代表 1em 是 16px
对带单位的数值做加法或减法运算时,Sass 会自动转换,否则如果不能转换则出错
还可以使用取模运算:%
除法/
有些特殊,因为/
即可以表示除法,也可以表示一个普通斜杠,以下三个情况满足任何一个都会使用除法
(1)在 / 的任意一边使用一个变量(2)整个值被小括号包围(2)该值被用作其他算术表达式的一部分
$var: 1px; $var/2px;(1px/2px);1 + 1px/2px;
颜色
不论最初的颜色值以何种形式表示,Sass 内部会同时使用 RGB 和 HSL 来表示颜色
列表
列表是一个数值的序列,用来表示 border、font等属性,如 2px solid #ccc,也可以是以逗号隔开
算术运算符对列表没什么用
布尔值
布尔值只有两种:true 和 false
布尔值不使用算术运算符,它们有自己的操作符:and、or 和 not
返回布尔值的操作符
<<=>>===
对于小于和大于,只用于数字;对于 == 则可以用于全部类型。
函数
和 CSS 函数不同,Sass 函数可以使用关键字变量,这意味着不是通过参数顺序来指明参数,而是可以显示地命名几个或者所有的变量
rgb($green: 127, $blue: 127, $red: 255)
数值函数
(1)abs($number) 取$number的绝对值;(2)ceil($number) $number向上取整;(3)floor(($number) $number向下取整;(4)round($number) $number四舍五入;(5)percentage($number) 将小数$number转换为百分数;(6)comparable($number1, $number2) $number1和$number2是否能比较;(7)unit($number) 返回$number的单位;(8)unitless($number) 返回$number是否没单位。
颜色函数
(1)alpha($color)/opacity($color) 返回$color的alpha通道;(2)blue($color) 返回$color的蓝色通道;(3)green($color) 返回$color的绿色通道;(4)red($color) 返回$color的红色通道;(5)hue($color) 返回$color的色度属性;(6)lightness($color) 返回$color的亮度属性;(7)saturation($color) 返回$color的饱和度属性;(8)complement($color) 返回$color色环与与$color的互补;(9)grayscale($color) 返回$color的灰度版本;(10)invert($color) 返回$color的反相版本;(11)mix($color1, $color2, [$weight]) 按照$weight的百分比将$color1和$color2混合在一起;(12)$adjust($color, ...) 按照给定的的颜色成分调整$color的各个属性;(13)$scale($color, ...) 按照百分比调整$color的各个属性;(14)$set($color, ...) 将$color的各个属性设置为固定值。
列表函数
(1)nth(a b c, $n) 返回列表第$n个值;(2)join($list1, $list2, [$separator]) 将两个列表连接起来,如果没有$separator,则分隔符以第一个为准;(3)length($list) 返回$list列表中项目的个数。
其他函数
(1)type-of($value) 返回一个无符号字符串,代表$value的类型,可以是:number、string、color、bool、list;(2)if($condition, $if-true, $if-false) 就像三元运算符,如果$condition为true,则返回$if-true,否则返回$if-false。
自定义函数
使用 @function 指令自定义函数,每个 @function 必须返回一个结果。
@function width($w) { @return $w * 100px;}
控制指令
@for
@for 指令用来计数,有两种语法
(1)@for $i from to(2)@for $i from through
@for $i from 1 to 5 { .box-#{$i} { width: 100px * $i; }}
编译后:
.box-1 { width: 100px; }.box-2 { width: 200px; }.box-3 { width: 300px; }.box-4 { width: 400px; }
@for $i from 1 through 5 { .box-#{$i} { width: 100px * $i; }}
编译后
.box-1 { width: 100px; }.box-2 { width: 200px; }.box-3 { width: 300px; }.box-4 { width: 400px; }.box-5 { width: 500px; }
可以看出这两种语法的差异在于要不要包括最后一个数字
@each
@each 指令多次重复一个样式块
@each $item in home, about, archive { nav .#{$item} { background-image: url(/images/#{$item}.png); }}
编译后
nav .home { background-image: url(/images/home.png); }nav .about { background-image: url(/images/about.png); }nav .archive { background-image: url(/images/archive.png); }
@each 指令中的列表可以用逗号分开,也可以用空格分开
@if @else
@if 指令用来控制一个样式块是否使用,其中也可以与 @else if 及 @else指令配合使用
$flag: 2;.nav { @if $flag == 1 { width: 100px; } @else if $flag == 2 { width: 200px; } @else { width: 300px; }}
编译后
.nav { width: 200px; }
- Sass指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- sass用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- SASS用法指南
- 深入理解Java:注解(Annotation)自定义注解入门
- OSB:Validate 组件的用法
- hdu 1298 T9
- 深入理解Java:注解(Annotation)--注解处理器
- 腾讯大数据套件带你玩转大数据
- Sass指南
- 小知识点
- 2015/9/11
- Delphi 10 Seattle,C++ Builder 10 Seattle,RAD Studio 10 Seattle 官方开发文档
- SS.World 客户端配置教程+Chrome智能切换教程
- Markdown简明使用教程
- C++全国二级计算机考试复习
- sed用法详解
- HTML表单练习~百度注册