Css Sass学习笔记

Sass

嵌套规则:

嵌套规则：Scss允许将一套Css样式嵌套在另一套样式中，内层样式会扩展为外层样式的子选择器

#main p
{
  color: white;
  .redbox
  {
    color: red;
  }
}

翻译为：

#main p {
  color: white; }
  #main p .redbox {
    color: red; }

嵌套功能避免了重复输入父容器，并且使css更容易阅读和管理：

#main p
{
  color: white;
  .redbox,input[type = "text"]+a
  {
    color: red;
  }
}

编译为：

#main p {
  color: white; }
  #main p .redbox, #main p input[type="text"] + a {
    color: red; }

在Sass中任然可以使用Css中的选择器语法。

父选择器&

父选择器，在嵌套的情况下，有时嵌套内层需要使用嵌套外层的父选择器,例如：当给某标签添加hover样式时：

a
{
  color: white;
  body &
  {
    color: red;
  }
  &:hover{
    color: blue;
  }
}

翻译为：

a {
  color: white; }
  body a {
    color: red; }
  a:hover {
    color: blue; }

&标签会直接替换掉外层标签，其他语法一致

Scss语法与Sass一致，只是使用缩进代替花括号，换行代替分号，语法格式更严格。如果定义多层嵌套&会一层一层向下传递：

body
  color: red
  a
    color: orange
    &:hover
      color: pink

翻译为：

body {
  color: red; }
  body a {
    color: orange; }
    body a:hover {
      color: pink; }

&必须作为选择器的第一个字符，随后可以生成复合选择器：

#main
  color: red
  &+a,&-sidebar,&~div,&-body
    color: orange

编译后：

#main {
  color: red; }
  #main + a, #main-sidebar, #main ~ div, #main-body {
    color: orange; }

注意：在&-body编译后为#main-body，构成一个新的ID，所以可以使用这种语法来扩展后缀选择器

属性嵌套

有些Css属性遵循命名空间，比如font-family, font-size, font-weight都以font开头，为了避免重复输入可以Sass允许将属性嵌套

#main
  color: white
  font:
    weight: bold
    size: 20px
  margin:
    left: 10px
    top: 10px
    bottom: 10px
    right: 10px

翻译为[^2]：

#main {
  color: white;
  font-weight: bold;
  font-size: 20px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px; }

也可以包含自己的属性：

#main
  color: white
  font: 20px/24px
    weight: bold
    size: 20px

翻译为：

#main {
  color: white;
  font: 20px/24px;
    font-weight: bold;
    font-size: 20px; }

SassScript

在CSS属性的基础上Sass提供了一些名为SassScrpit的小脚本，SassScript可用作于任何属性，允许属性使用变量，算数运算等额外功能。

1定义变量：

使用$来定义变量，在Scss中十分常用，赋值属性于写法一致：

/*定义变量*/
$width: 5px
#main
/*变量引用*/
  width: $width

编译为：

#main {
  width: 5px; }

变量是支持块级作用域的，变量引用只能在属于变量的作用域范围之内，全局变量可以在任何地方使用，而如果要将局部变量转变为全局变量！global来声明：

#main
  $width: 5px !global
  width: $width
#sidebar
  width: $width

但是我们不提倡将局部变量转换为全局变量

2.数据类型：

SassScrpit支持六种数据类型：

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

我们可以使用这些类型来定义变量，其他没什么好说的，数组我们来介绍一下：

数组 (lists)

Sass中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。

$margin: 10px, 0, 0,10px
#main
  $width: 5px !global
  margin: $margin

数组本身没有太多功能，但是后面学习的函数和插值语句将会是数组非常灵活，例如

• nth()函数可以直接访问数组中的某一项
• join()函数可以将多个数组组合连接在一起
• append函数可以在数组中添加新的值
• 而@each指令可以遍历数组中的每一个元素

数组中可以包含子数组，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。变化是，之前的 1px 2px, 5px 6px 使用逗号分割了两个子数组

用 () 表示不包含任何值的空数组。空数组不可以直接编译为css，比如font-family: () Sass 将会报错，如果数组中包含空数组或空值，编译时将会被清除。

map

Maps可视为键值对的集合，键被用于定位值 在css种没有对应的概念。 和Lists不同Maps必须被圆括号包围，键值对被都好分割 。 Maps中的keys和values可以是sassscript的任何对象

$map:(key:value,nextkey:nextvalue)

获取Map的值：

当你定义多个key/value后，如过你想取出一些值，你可以使用map-get()函数来找出对应key值得value：

$map:(key:10,nextkey:20)
#main
  $width: 5px !global
  margin: map-get($map,key)

检查某一个Key是否存在

Sass给了我们一个方法map-has-key()。这个方法能够检测出某个key是否存在：

$map: (key: value,nextkey: nextvalue);

.element 
  @if map-has-key($map, key)
    content: 'Map has this key.'
  @else 
    content: 'Map has not this key.'

@if是一个指令标签，于JavaScrpit中if的用法一致。

编译后：

.element {
  content: 'Map has this key.';
}

合并map

Sass允许我们将多个map合并成一个，使用map-merge()

$colors: (
  light: #ccc,
  dark: #000
);

$brand-colors: (
  main: red,
  alternative: blue
);

// 合并maps
$merged: map-merge($colors, $brand-colors);

.element {
  content: map-get($merged, alternative);
}