首页 > 代码库 > 菜鸟的 Sass 学习笔记

菜鸟的 Sass 学习笔记

2024-11-25 18:29:38   205人阅读

介绍

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 学习笔记


联系
我们