介绍

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建立。 Compass, Bourbon, 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-family，font-size和font-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:  0;padding: 0;
}

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 = 07和03 + 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/

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

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

菜鸟的 Sass 学习笔记相关推荐

菜鸟的MySQL学习笔记（一）
本学习笔记是照搬慕课网<与MySQL的零距离接触>内容,特此感谢! 1-1 mysql的安装与配置 Windows环境下的MSI安装: 1.安装: 双击MSI文件->用户协议-> ...
菜鸟的汇编语言学习笔记
汇编语言学习笔记 1.1机器语言计算机发展初期,人们都是用机器语言进行编程的,这也是人们能实现编程控制计算机的最低级别.那么机器语言是什么样子的呢?就是用0和1组成的一个串(形如011010101) ...
python scrapy菜鸟教程_scrapy学习笔记（一）快速入门
安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...
Sass学习笔记 -- 初步了解函数、运算、条件判断及循环
函数 sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始.sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以li ...
菜鸟教程-css3学习笔记
学习链接是: https://www.runoob.com/css3/css3-tutorial.html ############################################## ...
菜鸟教程-css学习笔记
CSS实例中有很多CSS的例子,可以学习. <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
Java菜鸟教程系列学习笔记总结基础篇(1)
基础语法本博客通过学习菜鸟教程Java专栏,并整理得出的Java基础知识. 命名规范 1.项目名全部小写 2.包名全部小写 3.类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写.如: ...
sass学习笔记（二）：sass的不同样式风格的输出方法
sass的不同样式风格的输出方法 1.嵌套式nested Sass 提供了一种嵌套显示 CSS 文件的方式.例如 nav {ul {margin: 0;padding: 0;list-style: n ...
java获取内存基址_安卓逆向|菜鸟的FRIDA学习笔记:内存读写
假设你的手机已经root,并已开启frida服务,电脑端已安装好Python,frida,IDA,GDA. 样本地址: 链接: https://pan.baidu.com/s/1y3kIXcBv25Q ...

菜鸟的 Sass 学习笔记

介绍

安装

学习记录

1.变量

2.嵌套

引用父选择器

嵌套属性

3.注释

4.Import

`@import`嵌套导入

5.Mixin

6.颜色

7.继承@extend

8.`@debug` `@warn @error`

9.控制指令和表达式

`@if()`

`@for`

`@each`

`@while`

10.功能指令#function

编译

`:nested`

`:compact`

`:compressed`

菜鸟的 Sass 学习笔记相关推荐

最新文章

热门文章

菜鸟的 Sass 学习笔记

介绍

安装

学习记录

1.变量

2.嵌套

引用父选择器

嵌套属性

3.注释

4.Import

@import嵌套导入

5.Mixin

6.颜色

7.继承@extend

8.@debug @warn @error

9.控制指令和表达式

@if()

@for

@each

@while

10.功能指令#function

编译

:nested

:compact

:compressed

菜鸟的 Sass 学习笔记相关推荐

最新文章

热门文章

`@import`嵌套导入

8.`@debug` `@warn @error`

`@if()`

`@for`

`@each`

`@while`

`:nested`

`:compact`

`:compressed`