首页 > 其他 > 详细

Sass学习笔记

时间：2016-11-21 23:36:03      阅读：350      评论：0      收藏：0      [点我收藏+]

阅读目录

一. 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最终生成的还是CSS文件呀。

    最初，我也是这么认为的。

    在我认真的学了Sass之后，原来使用Sass对CSS有很大的帮助，对于经常性写CSS文件的设计师们，节省了很多的开发时间，并且可以写出扩展性更强、更易于维护的代码。下面是我记录了Sass的学习笔记。

一. sass安装

1.1 Ruby安装

    主要针对的是window系统下的安装，因为Sass依赖于Ruby环境，所以应先安装Ruby，Ruby安装包下载链接：http://rubyinstaller.org/downloads/

    下载之后，安装过程中，请勾选Add Ruby executables to your PATH，添加环境变量。

    如果没有勾选，需在安装完成之后配置Ruby环境变量。

    在window系统中，新建系统变量RUBY_HOME，存放Ruby安装路径（D:\Program Files\Ruby23-x64）。

    在系统变量Path中，添加Ruby运行环境路径（%RUBY_HOME%\bin），Ruby环境变量配置完成。

1.2 运行gem命令

    安装完成之后，在开始菜单中找到Ruby，打开Start Command Prompt with Ruby，输入ruby -v，如果显示ruby的版本信息，表示安装成功。

1.3 安装sass

    A. 安装方法一：原配置源安装

    在命令行中直接输入gem install sass，按回车键即可。等待一段时间会提示安装成功。（因为国内网络原因，估计会安装不成功，所以可以FQ或者选择下面淘宝镜像安装）

    安装Sass测试版本 gem install sass –pre

    升级Sass版本 gem update sass

    查看Sass版本 sass –v

    帮助命令行 sass -h

    B. 安装方法二：淘宝镜像安装

    首先移除默认的配置源（https://rubygems.org/），然后添加淘宝镜像的配置源（https://ruby.taobao.org/），在命令行中输入

    gem source --remove https://rubygems.org/ 

    gem source --add https://ruby.taobao.org/

    输入gem source查看当前的源是否为淘宝镜像配置源，如果为淘宝源，再输入gem install sass，等待一段时间，会提示安装成功。

    C. 安装方法三：本地安装

    还可以选择本地安装，需要在网上找到Sass的gem文件，下载链接：https://rubygems.org/gems/sass

    下载之后，存放在任意位置，在命令行中输入gem install E://sass-3.4.22.gem，安装路径，根据自己存放的路径填写。

二. Sass基本用法

2.1 导入

    我们都知道CSS文件，都有导入功能，@import ‘reset.css’，但是在建站方面，这种导入效果和页面分别link两个CSS文件样式表的效果是一样的，因为HTTP请求的数目并不会减少。

    在Sass中，也有导入功能，如果导入的是CSS文件，@import ‘reset.css’，那效果和CSS文件导入效果是一样的，它还是以@import存在，并不会合并到编译后的CSS文件中。Sass导入可以省略.scss后缀名，如果以@import ‘reset’方式导入，会合并到编译后的CSS文件。一般需要导入的Sass文件是以_开头命名，如_reset.scss，导入只要引入reset即可。

    被导入Sass文件，_a.scss：

$fontSize: 12px;

    需要导入样式的Sass文件，b.scss：

@import ‘a‘;
body {
  font-size: $fontSize;
}

    编译后的CSS样式：

body {
  font-size: 12px;
}

2.2 注释

    Sass文件添加注释有两种方式：

    /* 这是注释 */

    这种方式和CSS文件中的注释是一样的。如果在压缩模式下使用这种注释方式，那么在最终生产的CSS文件中注释将会被删除。但如果不用压缩输出方式，注释将保留在CSS文件中。

    // 这是注释

    Sass有可以用两条正斜杠表示单行注释，这和JavaScript、Java文件的单行注释方式相同。这种方式的注释，不会显示在输出的CSS文件中。  

2.3 变量

    Sass中定义变量的语法是：美元符号、变量名、冒号、变量值。

    A.普通变量 $variable-name: value; 

$colorMain: orange;
a {
  color: $colorMain;
}

    编译后的CSS样式：

a {
  color: orange;
}

    B.默认变量 $variable-name: value !default; 

$fontSize: 13px !default;
body {
  font-size: $fontSize;
}

    编译后的CSS样式：

body {
  font-size: 13px;
}

    如果需要改变默认变量，在默认变量前面，重新赋值即可。（！default标识告诉Sass，只有在没有其他值赋值的情况下才使用默认值。）

$fontSize: 12px;
$fontSize: 13px !default;
body {
  font-size: $fontSize;
}

    编译后的CSS样式：

body {
  font-size: 12px;
}

    C.多值变量 $variable-name: value1 value2 value3;

    Sass可以定义多值变量， 多值变量可以分为list类型和map类型，对应于JavaScript的数组和对象。

    list类型变量，是以空格，逗号或者括号来分割多个值，可用nth($list, n)函数来取值。

$colorLink: #222 $colorMain; //第一个为默认颜色值，第二个为鼠标滑过颜色值
a {
  color: nth($colorLink, 1);
  &:hover {
    color: nth($colorLink, 2);
  }
}

    编译后的CSS样式：

a {
  color: #222;
}
a:hover {
  color: orange;
}

    上面这部分类似为一维数组的定义和使用，下面为多维数组：

$px: 20px 15px, 15px 20px; //二维数组

    或者用括号来分割：

$px: (20px 15px) (15px 20px); //二维数组

    map类型变量，是以key-value成对定义的，其中value值又可以为普通变量或者list变量。格式为：$map(key1: value1, key2: value2, key3: value3)，可用map-get($map, $key)来取值。

$heading: (h1: 20px, h2: 16px, h3: 13px);
body {
  font-size: map-get($heading, h3);
}

    编译后的CSS样式：

body {
  font-size: 13px;
}

2.4 嵌套

    嵌套语法是：选择器，左大括号，属性-值对，右大括号。在多值变量的时候，我们用到了一个&这样的符号，指的是父元素选择器，在嵌套伪选择器的时候经常用到。（在使用嵌套的时候要注意，尽量不要超过三层。）

div {
  background: $colorMain;
  a {
    color: #fff;
    text-decoration: none;
    &:hover, &:active {
      text-decoration: underline;
    }
  }
}

    编译后的CSS样式：

div {
  background: orange;
}
div a {
  color: #fff;
  text-decoration: none;
}
div a:hover, div a:active {
  text-decoration: underline;
}

    在上面我们讲述的是选择器的嵌套，在Sass中，还有一种属性嵌套：

.div {
  background: {
    image: url("img/img_01.png");
    repeat: no-repeat;
    position: center;
  }
  border: {
    style: solid;
    color: $colorMain;
    left: {
      width: 5px;
    }
    right: {
      width: 2px;
    }
  }
}

    编译后的CSS样式：

.div {
  background-image: url("img/img_01.png");
  background-repeat: no-repeat;
  background-position: center;
  border-style: solid;
  border-color: orange;
  border-left-width: 5px;
  border-right-width: 2px;
}

    注意：属性嵌套书写时，一定不要忘了属性后面所跟的冒号：。在对div的背景定义上，其实背景直接可以写为background: url(“img/img_01.png”) no-repeat center，不用像上面那么麻烦，所以在写样式的时候，也要注意减少不必要的麻烦。

2.5 继承

    使用@extend命令可让任何元素继承其他样式定义好的属性和值。如果有好几个元素有共同的样式属性，这种情况可使用@extend命令。

.div {
  background: $colorMain;
  padding: 20px;
}
.div-01 {
  @extend .div;
  border: 2px solid #eee;
}
.div-02 {
  @extend .div;
  border: 2px solid #ccc;
}

    编译后的CSS样式：

.div, .div-01, .div-02 {
  background: orange;
  padding: 20px;
}
.div-01 {
  border: 2px solid #eee;
}
.div-02 {
  border: 2px solid #ccc;
}

2.6 占位符

    占位符与继承@extend命令一起使用，有些情况下，一些代码只是用来做扩展用，就可以用占位符选择器，以此来减少冗余代码。以继承的例子来，只需将开头的.div换为%div即可。这样在生成的CSS文件中就不会有.div的样式。

%div {
  background: $colorMain;
  padding: 20px;
}
.div-01 {
  @extend %div;
  border: 2px solid #eee;
}
.div-02 {
  @extend %div;
  border: 2px solid #ccc;
}

    编译后的CSS样式：

.div-01, .div-02 {
  background: orange;
  padding: 20px;
}
.div-01 {
  border: 2px solid #eee;
}
.div-02 {
  border: 2px solid #ccc;
}

2.7 混合宏

    混合宏以@mixin命令声明，基本语法是：@mixin mixin-name($parameter) {…: $parameter}，混合宏既可以不传递参数，也可以有参数，并且可以是单个，也可以有多个参数。Compass提供了许多现成的混合宏。

    A.无参数混合宏

    无参数混合宏相当于继承，可以直接用继承代替。

@mixin center-block {
  margin-left: auto;
  margin-right: auto;
}
.div {
  @include center-block;
}

    编译后的CSS样式：

.div {
  margin-left: auto;
  margin-right: auto;
}

    B.有参数的混合宏

    以圆角为例（通常在定义混合宏的参数时，都会设定一个默认值，当然，也可以不设定。）：

@mixin border-radius($radius: 4px) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  -o-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
.div {
  @include border-radius(5px);
}

    编译后的CSS样式：

.div {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

    C.多个参数混合宏

    对于#{$direction}，可能有点陌生，这是变量的一种特殊使用方法，在字符串中使用，用#{}包含变量。

@mixin border-direction-radius($direction: top-left, $radius: 4px) {
  -moz-border-#{$direction}-radius: $radius;
  -webkit-border-#{$direction}-radius: $radius;
  -o-border-#{$direction}-radius: $radius;
  -ms-border-#{$direction}-radius: $radius;
  border-#{$direction}-radius: $radius;
}
.div {
  @include border-direction-radius(top-left, 5px)
}

    编译后的CSS样式：

.div {
  -moz-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -o-border-top-left-radius: 5px;
  -ms-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
}

    D.多组值参数

    如果一个参数可以有多组值，如box-shadow，transition等，那么参数则需要在变量后加三个点表示，如：$variables… 。以box-shadow为例，box-shadow: h-shadow v-shadow blur spread color inset，都指的是box-shadow: 水平偏量 垂直偏量 模糊值 阴影扩散值 阴影的颜色 inset值。

@mixin box-shadow ($shadow...){
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  -o-box-shadow: $shadow;
  -ms-box-shadow: $shadow;
  box-shadow: $shadow;
}
.div {
  @include box-shadow(1px 1px 2px 0px gray, 0px 1px 0px 1px lighten(gray, 0.5));
}

    编译后的CSS样式：

.div {
  -moz-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;
  -webkit-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;
  -o-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;
  -ms-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;
  box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;
}

 

三. Sass编程

3.1 数学计算

    Sass可进行加、减、乘、除计算。注意，进行计算时，数值的单位必须一致，并且运算符号最好两边都有一个空格，以免计算出错。

    A.加法

$widthContainer: 1200px;
$widthLeft: 20%;
$widthRight: 80%;
.div {
  width: $widthLeft + $widthRight;
}

    编译后的CSS样式：

.div {
  width: 100%;
}

    B.减法

.div {
  width: $widthRight - $widthLeft;
}

    编译后的CSS样式：

.div {
  width: 60%;
}

    C.乘法

    在计算乘法的时候要注意，当相乘时，如果值后面都带单位，会出现问题。

.addition {
  width: 20px * 40px;
}

    编译时，报错：

800px*px isn‘t a valid CSS value.

    如果只给一个值带单位，就正常了

.addition {
  width: 20 * 40px;
}

    编译后的CSS样式：

.addition {
  width: 800px;
}

    D.除法

    在计算除法的时候，跟乘法一样，只需要一个值带单位即可，并且表达式放在括号内，才能正常使用。

.addition {
  width: 80% / 20%;
}

    对此，编译之后，在CSS中，是没有意义的

.addition {
  width: 80% / 20%;
}

    如果使用括号：

.addition {
  width: (80% / 20);
}

    编译之后的CSS样式：

.addition {
  width: 4%;
}

3.2 条件

    @if和@else if控制命令，举个简单例子：

$div: left;
.div {
  @if $div == left {
    float: left;
  }@else if $div == right {
    float: right;
  }
}

    编译后的CSS样式：

.div {
  float: left;
}

3.3 循环

    @for循环命令，有两种形式：@for $variable from startNum to endNum，和@for $variable from startNum through endNum，startNum表示起始值，endNum表示结束值，关键字to循环时不包括endNum这个数，through循环时包括endNum这个数。

@for $i from 1 through 3 {
  .div-#{$i} {
    width: 100px * $i; 
  }
}

    编译后的CSS样式：

.div-1 {
  width: 100px;
}
.div-2 {
  width: 200px;
}
.div-3 {
  width: 300px;
}

    @for $variable from startNum to endNum：

@for $i from 2 to 4 {
  .div-#{$i} {
    width: 100px * $i;
  }
}

    编译后的CSS样式：

.div-2 {
  width: 100px;
}
.div-3 {
  width: 200px;
}

    @each循环命令，基本语法是：@each $variable in list/map，list/map表示list类型或者map类型变量。

    A.循环list类型变量

@each $list in a,b,c {
  .#{$list} {
    background-image: url("img/#{$list}.png");
  }
}

    编译后的CSS样式：

.a {
  background-image: url("img/a.png");
}
.b {
  background-image: url("img/b.png");
}
.c {
  background-image: url("img/c.png");
}

    多组值的循环：

$listData: (a, no-repeat, left top) (b, no-repeat, left bottom);
@each $name, $repeatType, $sizeType in $listData {
  .#{$name} {
    background-image: url("img/#{$name}.png");
    background-repeat: $repeatType;
    background-position: $sizeType;
  }
}

    编译后的CSS样式：

.a {
  background-image: url("img/a.png");
  background-repeat: no-repeat;
  background-position: left top;
}
.b {
  background-image: url("img/b.png");
  background-repeat: no-repeat;
  background-position: left bottom;
}

    B.循环map类型变量

$headings: (h1: 20px, h2: 16px, h3: 13px);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

    编译后的CSS文件：

h1 {
  font-size: 20px;
}
h2 {
  font-size: 16px;
}
h3 {
  font-size: 13px;
}

3.4函数

    Sass提供了好多现成的函数，我们也可以自己定义函数，用@function命令定义函数，@return定义函数返回值。

@function func() {
  @return 13px;
}
body {
  font-size: func();
}

    编译之后的CSS样式：

body {
  font-size: 13px;
}

Sass学习笔记

原文：http://www.cnblogs.com/ylliap/p/6078141.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！