菜鸟的 Sass 学习笔记

时间:2022-07-31 02:31:08

介绍

sass 是什么?? 在sass的官网,它是这么形容给自己的

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

sass 是世界上最成熟稳定强大的css扩展语言。

sass并不是一种编程语言,但是我们可以用于开发网页样式,你可以称它为css预处理器。用sass来写css,然后再编译成正常的css文件。

css兼容:Sass与所有版本的CSS完全兼容。

功能丰富:Sass拥有比任何其他CSS扩展语言更多的功能和能力。

成熟:Sass由其热爱的核心团队积极支持十多年。

社区:Sass由几家科技公司和数百名开发商的联盟积极支持和开发。

构架:有无数的框架与Sass建立。 CompassBourbon,  Susy 等等。

安装

先安装Ruby,再安装sass →gem install sass

更详细的安装→http://sass-lang.com/install

学习记录

1.变量

对于一个项目比如说像主要的颜色,或者说所有border的样式,这些比较重要的信息或者是在项目中重复使用的,在sass可以使用$来定义变量。

如果遇到突然项目整一个的border的颜色要改变,那么我们直接修改定义的变量border的颜色就可以了。

例:

//定义变量
$primary-border:1px solid #eee;
$primary-color:#488aff; //使用变量
.test{
border: $primary-border;
color: $primary-color;
} //编译结果
.test {
border: 1px solid #eee;
color: #488aff;
}

2.嵌套

sass允许css规则彼此嵌套,它具有明确的嵌套和可视化层次结构。但是请注意过度的嵌套会导致后期难以维护。

例如:

#main p {
color: #00ff00;
width: 97%; .redbox {
background-color: #ff0000;
color: #000000;
}
}

编译后:

#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}

引用父选择器

使用&来替代父选择器,&必须在复合选择器的开头,甚至可以跟一个被添加到父选择器的后缀

例:

#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
&-sidebar {
border: 1px solid;
}
}

编译后:

#main {
color: black;
}
#main a {
font-weight: bold;
}
#main a:hover {
color: red;
}
#main-sidebar {
border: 1px solid;
}

嵌套属性

比如font-familyfont-sizefont-weight都在font命名空间,如果在同一个命名空间设置很多它的属性,挺麻烦的,sass提供这样的方式,只要写一次命名空间,然后嵌套他的每个子属性。

.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}

属性名称空间本身还可以有一个值

例如:

.funky {
font: 20px/24px fantasy {
weight: bold;
}
}

编译后:

.funky {
font: 20px/24px fantasy;
font-weight: bold;
}

3.注释

Sass支持标准的多行CSS注释/* */以及单行注释//。多行注释编译后仍然保留,而单行注释编译后就被删掉了。

/* 我是
* 多行
* 注释
*/
//我是我是我是单行注释
body {
color: black; }

编译后:

/* 我是
* 多行
* 注释
*/
body {
color: black;
}

如果是很重要的注释,即使是压缩模式编译后也存在/*加一个感叹号

/*!
* 超级重要注释
*/

在注释中也可以使用变量

$version: "1.0.0";
/* 版本号 #{$version}. */

编译后

/* 版本号 1.0.0. */

4.Import

假设现在有两个sass文件,bass.scss和_part.scss,可以将_part.scss导入到bass.scss中。

然而导入的可是css文件,http:// 或者是url()

比如:

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

也可以一个import导入多个

@import "rounded-corners", "text-shadow";

这是一个示例:

_part.scss

ul,
ol {
margin:;
padding:;
}

base.scss

@import 'reset';

body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

@import嵌套导入

例如现在有一个这个example.sass文件里面有以下内容

.example {
color: red;
}

导入example

#main {
@import "example";
}

编译结果

#main .example {
color: red;
}

5.Mixin

我们使用@mixin定义一个代码块,然后用@include调用这个代码块。

@mixin border{
border:1px solid #ee;
} div{
@include border
}

编译后:

div {
border: 1px solid #ee;
}

还可以指定参数

@mixin border($color:#eee){
border:1px solid $color;
}
div{
@include border(#eee);
}

6.颜色

颜色值支持所有算术运算

p {
color: #010203 + #040506;
}

计算01 + 04 = 05,,02 + 05 = 0703 + 06 = 09,并编译为:

p {
color: #050709; }
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
} //编译为:
p {
color: rgba(255, 255, 0, 0.75); }

它还提供了一些内置的颜色函数

hsl($ hue,$ saturation,$ lightness):从色调,饱和度和亮度值创建颜色。

hsla($ hue,$ saturation,$ lightness,$ alpha):从色调,饱和度,亮度和Alpha值创建颜色。

还有更多的关于内置的颜色函数可以看这里 →http://sass-lang.com/documentation/Sass/Script/Functions.html

7.继承@extend

sass允许一个选择器去继承另外一个选择器.

.test1 {border: 1px solid #eee;}
.test2 {@extend .test1;color:white;}

编译后

.test1, .test2 {
border: 1px solid #eee;
} .test2 {
color: white;
}

8.@debug @warn @error

@debug和@warn,指令将SassScript表达式的值打印到标准错误输出流,它有助于调试。

@warn "这是一个警告";
@error "这是一个错误"
@debug "这是一个调试输出"

输出

WARM:这是一个警告
ERROR:这是一个错误
DEBUG:这是一个调试输出

9.控制指令和表达式

sass支持基本的控制指令和表达式控制,指令是高级功能,下来来介绍一下。

@if()

p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}

编译后

p {
border: 1px solid; }

@if声明可以跟着几个@else,@if语句和一个@else语句。如果@if语句失败,@else if则会按顺序尝试这些语句。

$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}

编译后

p {
color: green; }

@for

@for指令重复输出一组样式。对于每次重复,使用计数器变量来调整输出。

@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}

编译后

.item-1 {
width: 2em;
} .item-2 {
width: 4em;
} .item-3 {
width: 6em;
}

@each

@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}

编译后

.puma-icon {
background-image: url("/images/puma.png");
} .sea-slug-icon {
background-image: url("/images/sea-slug.png");
} .egret-icon {
background-image: url("/images/egret.png");
} .salamander-icon {
background-image: url("/images/salamander.png");
}

@while

$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}

编译后

.item-6 {
width: 12em;
} .item-4 {
width: 8em;
} .item-2 {
width: 4em;
}

10.功能指令#function

可以在sass中定义自己的函数,并在任何值或脚本上下文中使用它们。注意避免函数命名一样导致冲突了。

例如:

//定义变量
$grid-width: 40px;
$gutter-width: 10px; //自定义函数
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
} //使用
#sidebar { width: grid-width(5); } //编译结果
#sidebar {
width: 240px;
}

编译

sass编译输出的默认CSS样式,可以执行-style命令行来选择四种不同的输出样式

:nested

nested样式是默认的Sass样式,因为它反映了CSS样式的结构和他们所设计的HTML文档。每个属性都有自己的行,但缩进不是常量。根据嵌套的深度,每个规则都是缩进的。嵌套样式在查看大型CSS文件时非常有用:它可以让您轻松掌握文件的结构,而无需实际读取任何内容。

#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }

:expanded

expanded是一个更典型的人造CSS风格,每个属性和规则占一线。属性在规则中缩进,但是规则不以任何特殊方式缩进。

#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}

:compact

compact采用比嵌套或扩展更少的空间。它还将重点放在选择器上而不是他们的属性。每个CSS规则仅占用一行,每行都在该行上定义。嵌套规则彼此相邻,没有换行符,而单独的规则组在它们之间具有换行符。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

:compressed

compressed样式占用尽可能少的空间,除了分隔选择器和文件末尾的换行符之外,没有空格。它还包括一些其他轻微的按压,例如选择最小的颜色表示。这并不意味着人的可读性。

#main{color:#fff;background-color:#000}#main p{width:10em}

ps:

sass 官网 →http://sass-lang.com/

sass github →https://github.com/sass

sass一个在线将sass编译为css的网站 →https://www.sassmeister.com/

此随笔乃本人学习记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。