首页 > > 网页制作 > css >

菜鸟的 Sass 学习笔记

2018-06-24 01:44:53来源：未知阅读 ()

介绍

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/

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：canvas背景效果

下一篇：HTML切换页面IE版本

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签

菜鸟的 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

`@import`嵌套导入

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

`@if()`

`@for`

`@each`

`@while`

`:nested`

`:compact`

`:compressed`