菜鸟的 Sass 学习笔记

Posted 2020-10-02 huangenai

介绍

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/

 

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

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