菜鸟的 Sass 学习笔记

介绍

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/

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

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

时间： 2024-10-29 19:09:35

菜鸟的 Sass 学习笔记的相关文章

Sass学习笔记（补充）

阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@debug命令.@warn命令 9. 使用Sass时的注意事项 相关链接:Sass学习笔记前篇 Sass关于颜色函数的乐趣 在Sass学习笔记前篇,记载了Sass安装.基本用法.编程语法,在这篇,将补充在前篇未记载的知识. 1. Sass和SCSS的区别 参考链接:http://sass.bootcss

菜鸟的ubuntu学习笔记

初识ubuntu感觉这个系统绝对够高大上,简洁的桌面,流畅的操作界面,在加上神秘的终端控制,突然感觉自己的世界真的好渺小,所以我下定决心在接下来的日子里我要告别windows,把ubuntu学好,尝试新的东西在新鲜好奇之余更多的是各种不习惯,所以学好它需要的是一颗爱它永不变的决心,说的有点扯淡了呵呵.其实我主要是想通过博客把自己学习ubuntu的经历与大家分享交流.就像ubuntu本身一样:仁道待人,天下共享 ---------------- 写在前边的话 巧妇难为无米之炊之ubuntu的安装

sass学习笔记2

今天介绍sass在重用代码时最具威力的两个功能.一个是嵌套(Nesting),一个混合(Mixin). 我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上,而这定义过程,此元素的父元素与其他选择器都有许多相同的部分,嵌套就是把这些相同的部分放到某一层花括号里,然后通过花括号的层层缩进堆砌,找到它们的共性与特性. @charset "utf-8";//必须设置了这个才能编译有中文的注释 nav { ul { margin: 0; padding: 0; list-styl

Sass学习笔记

阅读目录 一. Sass安装 1.1 Ruby安装 1.2 运行gem命令 1.3 安装Sass 二. Sass基本用法 2.1 导入 2.2 注释 2.3 变量 2.4 嵌套 2.5 继承 2.6 占位符 2.7 混合宏 三. Sass编程 3.1 数学计算 3.2 条件 3.3 循环 3.4 函数 Sass被称为"CSS预处理器",就是用一种编程的思想去写CSS样式表.在还没接触Sass的时候,很多人都不愿意去了解,认为都会了CSS,为什么还要去写Sass,Sass最终生成的还是C

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal

sass学习笔记-安装

Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本. Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby.在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示: Ruby 安装完成后,在开始菜单中找到新安装的 Ruby

sass学习笔记-输出方法

1.嵌套输出方式 nestedSass 提供了一种嵌套显示 CSS 文件的方式.例如 nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 在编译的时候带上参数“ --style nested”: sass --watch test.scss:test.

Sass学习笔记 -- 变量及变量作用域历史遗留问题

sass有两种后缀名文件: 一种后缀名为sass,写选择器时不能使用大括号和分号 一种后缀名为scss,使用大括号和分号 //后缀名为sass的语法,不能出现大括号和分号 $highlight-color: #abcdef .selected   border: 1px $highlight-color solid    //后缀名为scss的语法,跟css一样,需要大括号和分号 $highlight-color: #abcdef; .selected{   border:1px solid $

Sass学习笔记 -- 初步了解函数、运算、条件判断及循环

函数 sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始.sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比. //scss $baseFontSize:      10px !default; $gray: