sass学习笔记

sass学习笔记

安装

npm install -g sass

vue项目中使用sass

创建vue项目

vue create projectName

安装sass相关配置

//注意版本
npm install node-sass
npm install sass-loader

编写sass

在style标签上写lang=“scss”,即可开始。

特色功能

• 兼容css3
• 添加变量、嵌套（nesting）、混合（mixins）、导入（inline import）等功能
• 通过函数进行颜色值和属性值的运算
• 提供控制指令（control diretives）等高级功能
• 自定义输出格式

语法格式

两种语法

1、SCSS语法，以.scss作为扩展名

​ 与css差不多，常用、流行

2、Sass语法，.sass作为扩展名

不写花括号和分号，靠缩进来区分块

任何一种格式都可以直接导入（@import）到另一种格式中，，或通过sass-convert命令行中间转换。

parent selector

& 表示父选择器

一般hover的时候用，嵌套不用写，直接嵌套就行

the value ! important ,which is parsed as an unquoted string.

special functions

calc(),element(),progid,expression()

url()

min()

max()

unquoted strings

无引号字符串，一般是特定的名词，如red，blod

嵌套规则

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; }

嵌套功能避**免了重复输入父选择器，**而且令复杂的 CSS 结构更易于管理：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

对于伪类等，可以直接使用父选择器&，，，或需要用到&的父选择器

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，可以用短横线连接例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

多层嵌套，&只从内往外找，第一个父元素。

同一命名空间归类书写

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

@extend如何工作（继承）

使用@extend我们可以使用CSS中的定义好的选择器，下面的例子可以很好的说明一切：

.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend .icon;
  /*错误图标指定的样式... */
}

.info-icon {
  @extend .icon;
  /* 信息图标指定的样式... */
}

上面的SCSS代码将编译的CSS代码如下：

.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /*错误图标指定的样式... */
}

.info-icon {
  /* 信息图标指定的样式... */
}

存在的问题：.icon几乎不会使用，所以下面用占位符来优化。

占位符

使用(%)开始，而且编译出来的CSS代码中并不会包括%placeholder规则中的样式，除非是通过@extend对其进行调用。

%icon {  transition: background-color ease .2s;  margin: 0 .5em;}.error-icon {  @extend %icon;  /*错误图标指定的样式... */}.info-icon {  @extend %icon;  /* 信息图标指定的样式... */}

编译出的CSS:（无.icon)

.error-icon, .info-icon {  transition: background-color ease .2s;  margin: 0 .5em;}.error-icon {  /*错误图标指定的样式... */}.info-icon {  /* 信息图标指定的样式... */}

@mixin指令

是另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数。
可以传递参数的模块

参数

$string

用$引用

参数默认值

冒号后写

@mixin button($background: green)

.button-blue { @include button(blue); }m

参数传递可以进行指定，顺序可换

.button-green { @include button($background: green, $color: #fff); }

传递任意参数

…表示

@mixin box-shadows($shadow...) { box-shadow: $shadow; } .container { @include box-shadows(0px 1px 2px #333, 2px 3px 4px #ccc); }

注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

/**/会编译到css中，//不会编译

可以在注释中添加变量

$version: "1.2.3";/* This CSS is generated by My Snazzy Framework version #{$version}. */

颜色运算

p {  color: #010203 + #040506;}

计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为

p {  color: #050709; }

p {  color: #010203 * 2;}

计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为

p {  color: #020406; }

如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

字符串运算

+ 可用于连接字符串

p {  cursor: e + -resize;}

编译为

p {  cursor: e-resize; }

注意，如果有引号字符串（**位于 + 左侧）**连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

p:before {  content: "Foo " + Bar;  font-family: sans- + "serif";}

编译为

p:before {  content: "Foo Bar";  font-family: sans-serif; }

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

p:before {  content: "I ate #{5 + 10} pies!";}

编译为

p:before {  content: "I ate 15 pies!"; }

条件语句

@if

@else if

p {  @if 1 + 1 == 2 { border: 1px solid; }  @if 5 < 3 { border: 2px dotted; }  @if null  { border: 3px double; }}

循环语句

@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}

编译为

.item-1 {  width: 2em; }.item-2 {  width: 4em; }.item-3 {  width: 6em; }

1. @for $i from 1 through 3 //从1到3，包含1，3
2. @for $i from 1 to 3 //不包含3

遍历

@each $valiable in puma, sea-slug, egret, salamander {}

多值遍历

@each $animal, $color, $cursor in (puma, black, default),                                  (sea-slug, blue, pointer),                                  (egret, white, move) {  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');    border: 2px solid $color;    cursor: $cursor;  }}

is compiled to:

.puma-icon {  background-image: url('/images/puma.png');  border: 2px solid black;  cursor: default; }

条件循环

$i: 6;@while $i > 0 {  .item-#{$i} { width: 2em * $i; }  $i: $i - 2;}

@include和@extend的区别

混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了。