SASS学习笔记

2017-11-15 10:52:37来源:oschina作者:小母鸡55人点击

分享
安装

Windows


安装Ruby(https://rubyinstaller.org/downloads/)
安装SASS
打开cmd命令,输入一下命令 gem install sass

常用的sass命令


//更新sass
gem update sass
//查看sass版本
sass -v
//查看sass帮助
sass -h
语法格式

sass有两种语法格式


.sass文件(最早的语法格式。也被称为缩进格式)
.scss文件(css通用语法)
数据类型

SassScript 支持 6 种主要的数据类型:



数字,1, 2, 13, 10px
字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
颜色,blue, #04a3f9, rgba(255,0,0,0.5)
布尔型,true, false
空值,null
数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)

SassScript 也支持其他 CSS 属性值,比如 Unicode 字符集,或 !important 声明。然而Sass 不会特殊对待这些属性值,一律视为无引号字符串。


注释

在 Sass 中注释有两种方式


类似 CSS 的注释方式,使用 ”/* ”开头,结属使用 ”*/ ”
类似 JavaScript 的注释方式,使用“//”
两者区别前者会在编译出来的 CSS 显示
后者在编译出来的 CSS 中不会显示
变量

注:变量声明:不区分中划线和下划线
例如:$h_color和$h-color是同一个变量


变量声明


普通变量 $name:100px;
默认变量$name:100px !default;

变量调用


直接调用 $top
作为属性 #{$top} 也称之为 插值

示例


$width: 100px;
$top: top;
.box{
width: $width
border-#{$top}: 1px solid red;
#{$top}:20px;
}

编译后


.box {
width: 100px;
border-top: 1px solid red;
top: 20px;
}
嵌套
选择器嵌套
属性嵌套
伪类嵌套

###1. 选择器嵌套


& 父级选择器
> 子级选择器
+ 相邻选择器
~ 同级选择器

示例:


article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top:0;}
&:hover{color:red;}
}

编译后


article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
article :hover{color:red;}
2. 属性嵌套

CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right,与这个类似的还有 margin、padding、font 等属性。


假设你的样式中用到了:


.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}

在 Sass 中我们可以这样写:


.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
3. 伪类嵌套

其实伪类嵌套和属性嵌套非常类似,只不过他需要借助&符号一起配合使用。我们就拿经典的“clearfix”为例吧:


.clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}

编译出来的 CSS:


.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
混合宏 / 继承 / 占位符
各自优缺点及使用
混合宏
优点:可以传参数
缺点:不会自动合并相同的样式代码
使用:如果你的代码块中涉及到变量,建议使用混合宏继承
优点:继承选择器定义样式的基类,不需要单独定义。可以合并相同的代码
缺点:不能传参,不管调用或不调用都会编译
使用:如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在。占位符
优点:基类不会被编译
缺点:需要单独定义基类

总结
总结


1. 混合宏

声明
使用@mixin来声明一个混合宏。如:


@mixin border{
border: 1px solid red;
border-radius: 5px;
}

调用
通过@include来调用声明好的混合宏


.box{
@include border;
}

传参
参数用于给混合指令中的样式设定变量,并且赋值使用。在定义混合指令的时候,按照变量的格式,通过逗号分隔,将参数写进圆括号里。引用指令时,按照参数的顺序,再将所赋的值对应写进


@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: solid;
}
}
p { @include sexy-border(blue, 1px); }

混合指令也可以使用给变量赋值的方法给参数设定默认值,然后,当这个指令被引用的时候,如果没有给参数赋值,则自动使用默认值


@mixin sexy-border($color, $width: 1px) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(red); }
h1 { @include sexy-border(red, 2px); }

编译为:


p {
border-color: red;
border-width: 1px;
border-style: solid;
}
h1 {
border-color: red;
border-width: 2px;
border-style: solid;
}

关键词参数
混合指令也可以使用关键词参数,上面的例子也可以写成:
注:关键词参数不需要按照参数顺序传参,可以打乱顺序使用


p {
@include sexy-border($color: blue);
}
h1 {
@include sexy-border($color: blue, $width: 2px);
}
h2 {
@include sexy-border($width: 2px , $color: blue);
}

传参(不确定个数)
有时,不能确定混合指令需要使用多少个参数,比如一个关于 box-shadow 的混合指令不能确定有多少个 shadow 会被用到。这时,可以使用参数变量 … 声明(写在参数的最后方)告诉 Sass 将这些参数视为值列表处理:


@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译为


.shadowed {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

参数变量也可以用在引用混合指令的时候 (@include),与平时用法一样,将一串值列表中的值逐条作为参数引用:


@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}

编译为


.primary {
color: #ff0000;
background-color: #00ff00;
border-color: #0000ff;
}
2. 继承

在 Sass 中是通过关键词 @extend来继承已存在的类样式块,从而实现代码的继承。如下所示:


.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}

编译后


.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
3. 占位符

Sass 中的占位符 % 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。来看一个演示:


%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}

这段代码没有被 @extend 调用,他并没有产生任何代码块,只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码:


%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}

编译出来的css


.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
运算
1. 数字运算 + - * / %
注:除法运算
/ 在 CSS 中通常起到分隔数字的用途,SassScript 作为 CSS 语言的拓展当然也支持这个功能,同时也赋予了/ 除法运算的功能。也就是说,如果 / 在 SassScript 中把两个数字分隔,编译后的 CSS 文件中也是同样的作用。

以下三种情况 / 将被视为除法运算符号:


如果值,或值的一部分,是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分
p {
font: 10px/8px;// 纯 CSS,不是除法运算
width: $width/2; // 使用了变量,是除法运算
width: round(1.5)/2; // 使用了函数,是除法运算
height: (500px/2); // 使用了圆括号,是除法运算
margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
}

编译出来的CSS


p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
2. 关系运算 < > <= >= == !=
3.颜色值运算

颜色值的运算是分段计算进行的,也就是分别计算红色,绿色,以及蓝色的值:


p {
color: #010203 + #040506;
}

计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09,然后编译为


p {color: #050709; }
控制命令
@if

@if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用。


@mixin blockOrHidden($boolean:true) {
@if $boolean {
@debug "$boolean is #{$boolean}";
display: block;
}
@else {
@debug "$boolean is #{$boolean}";
display: none;
}
}
.block {
@include blockOrHidden;
}
.hidden{
@include blockOrHidden(false);
}

编译出来的CSS:


.block {
display: block;
}
.hidden {
display: none;
}
@for 循环

循环,这个指令包含两种格式


@for $i from through
@for $i from to
$i 表示变量
start 表示起始值
end 表示结束值

区别在于 through 与 to 的含义


当使用 through 时,条件范围包含 的值
使用 to 时条件范围只包含 的值不包含 的值
另外,$i 可以是任何变量
注: 必须是整数值
@while循环

@while 指令也需要 SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为 false 时停止循环。这个和 @for 指令很相似,只要 @while 后面的条件为 true 就会执行。


这里有一个 @while 指令的简单用例:


$types: 4;
$type-width: 20px;
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}

编译出来的 CSS


.while-4 {
width: 24px;
}
.while-3 {
width: 23px;
}
.while-2 {
width: 22px;
}
.while-1 {
width: 21px;
}
@each循环

@each 循环就是去遍历一个列表,然后从列表中取出对应的值。


@each 循环指令的形式:


@each $var in

这有一个 @each 指令的简单示例:


$list: adam john wynn mason kuroir;//$list 就是一个列表
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png") no-repeat;
}
}
}
.author-bio {
@include author-images;
}

编译出 CSS:


.author-bio .photo-adam {
background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
background: url("/images/avatars/kuroir.png") no-repeat; }
内置函数
字符串函数
数字函数
列表函数
Introspection 函数
Miscellaneous(三元)函数等
Map函数
颜色函数
1. 字符串函数
unquote($string) 删除字符串中的引号。
quote($string) 给字符串添加引号。
To-upper-case($string) 小写字母转换成大写字母
To-lower-case($string) 大写字母转换成小写字母
2. 数字函数
percentage($value) 将一个不带单位的数转换成百分比值
round($value)将数值四舍五入,转换成一个最接近的整数
ceil($value) 将大于自己的小数转换成下一位整数
floor($value) 将一个数去除他的小数部分
abs($value) 返回一个数的绝对值
min($numbers…) 找出几个数值之间的最小值
max($numbers…) 找出几个数值之间的最大值
random()获取随机数(0~1)
3.列表函数
length($list) 返回一个列表的长度值
nth($list, $n) 返回一个列表中指定的某个标签值(序号从1开始)
join($list1, $list2, [$separator]) 将两个列给连接在一起,变成一个列表
append($list1, $val, [$separator]) 将某个值放在列表的最后
zip($lists…) 将几个列表结合成一个多维的列表
index($list, $value) 返回一个值在列表中的位置值(序号从1开始)
4.Introspection函数

type-of($value) 返回一个值的类型


number 为数值型。
string 为字符串型。
bool 为布尔型。
color 为颜色型。

unit($number) 返回一个值的单位

unitless($number) 判断一个值是否带有单位

comparable($number-1, $number-2) 判断两个值是否可以做加、减和合并

5. Miscellaneous函数

在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值:


if($condition,$if-true,$if-false)
6. Map函数

Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现,但其更像是一个 JSON 数据。


那么 Sass 的 map 长得与 JSON 极其相似:


$map: (
$key1: value1,
$key2: value2,
$key3: value3
)

获取值


map-get($map,$key) 根据给定的 key 值,返回 map 中相关的值。
map-merge($map1,$map2) 将两个 map 合并成一个新的 map。
map-remove($map,$key) 从 map 中删除一个 key,返回一个新 map。
map-keys($map) 返回 map 中所有的 key。
map-values($map) 返回 map 中所有的 value。
map-has-key($map,$key) 根据给定的 key 值判断 map 是否有对应的 value 值,如果有返回 true,否则返回 false。
keywords($args) 返回一个函数的参数,这个参数可以动态的设置 key 和 value。

实例


$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
.btn-dribble{
color: map-get($social-colors,facebook);
}

编译出来的CSS:


.btn-dribble {
color: #3b5998;
}
7. 颜色函数
rgb($red,$green,$blue) 根据红、绿、蓝三个值创建一个颜色(把rgb值转换为16进制)- rgba($color,$alpha) 根据红、绿、蓝和透明度值创建一个颜色(把16进制转化为rgba);
red($color) 从一个颜色中获取其中红色值;
green($color) 从一个颜色中获取其中绿色值;
blue($color) 从一个颜色中获取其中蓝色值;
mix($color-1,$color-2,[$weight]) 把两种颜色混合在一起。

HSL函数


hsl($hue,$saturation,$lightness) 通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色;
hsla($hue,$saturation,$lightness,$alpha) 通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色;
hue($color) 从一个颜色中获取色相(hue)值;
saturation($color) 从一个颜色中获取饱和度(saturation)值;
lightness($color) 从一个颜色中获取亮度(lightness)值;
adjust-hue($color,$degrees) 通过改变一个颜色的色相值,创建一个新的颜色;
lighten($color,$amount) 通过改变颜色的亮度值,让颜色变亮,创建一个新的颜色;
darken($color,$amount) 通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色;
saturate($color,$amount) 通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色
desaturate($color,$amount) 通过改变颜色的饱和度值,让颜色更少的饱和,从而创建出一个新的颜色;
grayscale($color) 将一个颜色变成灰色,相当于desaturate($color,100%);
complement($color) 返回一个补充色,相当于adjust-hue($color,180deg);
invert($color) 反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。

Opacity函数


alpha($color) / opacity($color) 获取颜色透明度值;
rgba($color, $alpha) 改变颜色的透明度值;
opacify($color, $amount) / fade-in($color, $amount) 使颜色更不透明;
transparentize($color, $amount) / fade-out($color, $amount) 使颜色更加透明。
其他指令
@import

Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。


Sass 会在当前目录下寻找其他 Sass 文件, 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过 :load_paths 选项或者在命令行中使用 --load-path 选项来指定额外的搜索目录。


@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则:


如果文件的扩展名是 .css。
如果文件名以 http:// 开头。
如果文件名是 url()。
如果 @import 包含了任何媒体查询(media queries)。

如果上述情况都没有出现,并且扩展名是 .scss 或 .sass, 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名, Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。


@media

Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。来看一个简单示例:


.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}

编译出来:


.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@extend

继承


@at-root

@at-root 跳出嵌套。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。来看一个简单的示例:


.a {
color: red;
.b {
color: orange;
.c {
color: yellow;
@at-root .d {
color: green;
}
}
}
}

编译出来的CSS


.a {
color: red;
}
.a .b {
color: orange;
}
.a .b .c {
color: yellow;
}
.d {
color: green;
}
@debug

@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug:


@debug 10em + 12em;

会输出:


Line 1 DEBUG: 22em
@warn

@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。


@error

@error 和 @warn、@debug 功能是如出一辙。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台