1. 变量:SASS允许使用变量,所有变量以$开头。

  变量声明:$highlight-color: #000;

  注意:变量可以在css规则块定义之外存在。如下例子:

$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
} //编译后
nav {
width: 100px;
color: #F90;
}
$nav-color这个变量定义在了规则块外边,所以在这个样式表中都可以像 nav规则块那样引用它。
$width这个变量定义在了nav{ }规则块内,所以它只能在nav规则块 内使用。
这意味着是你可以在样式表的其他地方定义和使用$width变量,不会对这里造成影响。

  变量引用:css生成时,变量会被他们的值替代,以后只需要改变这个变量的值,所有引用变量的地方的值都会改变。

$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
} //编译后
.selected {
border: 1px solid #F90;
}

  变量名用中划线还是下划线:这两种用法相互兼容,没有区别。用中划线声明的变量可以使用下划线的方式引用,反之亦然。

  如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

$left: left;
div{
margin-#{$left}:40px;
}

  sass允许在代码中使用算式

 body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

2. 嵌套:选择器和属性都可以嵌套

  父选择器的标识符:&

  sass使用后代选择器的方式生成这种连接(父选择器 空格 子选择器)。使用:hover伪类时这种后代选择器连接不起作用,所以需要用到&。看完以下例子就明白了.

 article a {
color: blue;
:hover { color: red }
} //编译后如下 article a {
color: 3ee;
}
article a :hover {
color: red;
}
问题: 第11行代码 a后面多了空格,所以color:red是不起作用的

当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换:

article a {
color: 3ee;
&:hover { color: red }
}
//编译后
article a { color: 3ee; }
article a:hover { color: red; }

  群组选择器的嵌套: 减少工作量,但是会降低网站速度

.container {
h1,h2,h3{color: red;}
}
//编译后
.container h1, .container h2, .container h3 { color: red; }

  子组合选择器和同层组合选择器:>、+和~;

// 选择article下的所有命中section选择器的元素
article section { margin: 5px } // 子组合选择器>选择一个元素的直接子元素
article > section { border: 1px solid #ccc }
// 同层相邻组合选择器+选择header元素后紧跟的p元素
header + p { font-size: 1.1em } //同层全体组合选择器~,选择所有跟在article后的同层article元素,不管它们之间隔了多少其他元素
article ~ article { border-top: 1px dashed #ccc }
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
} //编译后
article ~ article { border-top: 1px dashed #ccc }
article > section{ background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

  嵌套属性:以border为例:

//border后面必须加上冒号:
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
//编译后 nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}

border缩写形式:

nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
//编译后
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}

3. 注释

标准的CSS注释 /* comment */ ,会保留到编译后的css文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

/*!
    重要注释!
*/

Sass变量及嵌套的更多相关文章

  1. Sass变量、嵌套

    声明变量定义变量的语法Sass 的变量包括三个部分: 声明变量的符号“$” 变量名称 赋予变量的值简单的示例,假设你的按钮颜色可以给其声明几个变量: $brand-primary : darken(# ...

  2. 2.sass变量、嵌套、混合(mixin)、继承拓展、@import、comment

    变量.嵌套.混合(mixin).继承拓展.@import.comment 变量的意义 在sass里我们可以定义多个变量来存放颜色.边框等等的样式,这样就可以在下面想要使用样式的时候使用变量了 这样的优 ...

  3. 如何设置 sass 全局变量,js如何使用 sass 变量

    关键词:sass全局变量 js引用sass变量 1 如何在样式中使用 scss 的声明的全局变量 假设我们有一个全局的 scss 变量文件/styles/_vars.sass,如下: $red: re ...

  4. sass变量

    sass变量用法 1.sass变量必须以$符开头,后面紧跟着变量名 2.变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样) 3.如果值后面加上!default则表示默认值 默认变量 ...

  5. vue-cli3 配置全局less 、sass 变量

    之前在用vue-cli3框架的时候对于常用的less .sass 变量都是需要时就在单文件中引入文件,这样做比较麻烦.那么基于 vue-cli3 如何配置全局的less .sass 变量? <1 ...

  6. sass 变量的声明 嵌套

    sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可. $baseLineHeight: 2; $baseLineHeight: ...

  7. sass基础—属性嵌套以及跳出嵌套 @at-root

    /*注意:定义的变量若是没有使用则不会编译到css文件中.*//*1)sass的局部变量*/$font:14px;//定义$font:12px !default; //没有default时是重新赋值, ...

  8. sass 变量

    1.使用变量 $符号标识变量 变量名中  中划线和下划线互通(不包括sass中纯 css 部分) 变量值 css 属性标准值 包括以空格 和 逗号 , 分开的多个属性值 变量可以定义在规则块之外

  9. 【Sass初级】嵌套选择器规则

    在CSS中,我们都知道所有代码都在一个“根级别”的选择器中,每个CSS的样式声明都写嵌套的话,那意客味需要写很多的代码. 今天我要带领大家进入到Sass的最基本原则中.这就是所谓的“基础规则(Ince ...

随机推荐

  1. 十八、移动端rem布局

    使用rem布局,首先要知道自己是根据UI给的视效图的多少基准的,这里是以750px为基准,代码如下: //rem布局,此处根据750px来设置,放大100倍 (function(doc, win) { ...

  2. js 时间格式化 (兼容safari)

    js 时间格式化,兼容IE8和safari浏览器. function formatDate(date, fmt, near, type) { var dateStr = date; if (!date ...

  3. Kettle数据抽取解决方案

    一. Kettle介绍 1. Kettle简介 ETL即数据抽取(Extract).转换(Transform).装载(Load)的过程.Kettle的中文翻译为水壶.Kettle以元数据驱动的方式提供 ...

  4. 【Leetcode】【Medium】Generate Parentheses

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...

  5. ARC以及MRC中setter方法的差异

    ARC以及MRC中setter方法的差异 有时候,你会需要重写setter或者getter方法,你知道么,ARC与MRC的setter方法是有着差异的呢. 先看下MRC下的setter方法: 在看下A ...

  6. 为某个云服务设置RVIP

    获取所有Azure(云)服务Get-AzureService #查看某个云服务的LocationGet-AzureService -ServiceName tests |select location ...

  7. DatagramSocket类 会发生线程阻塞的方法

    遇到这个问题,还告诉别人错了,这里来Mark一下. receive()方法会使调用线程阻塞. Java使用DatagramSocket代表UDP协议的Socket,DatagramSocket本身只是 ...

  8. JavaScrip File类拓展

    ##今天在做jsp的文件上传功能,想着上传文件后在当前页面把选取的文件信息展现出来,查来查去,发现了js中的file类,之前在w3c和runboob盯了好久找找不到....不过终于还是在网上查到了这个 ...

  9. SAP S/4HANA CDS View的访问控制实现:DCL介绍

    来自我的同事Xu Miles Authorization Objects are business concept, they are distinguished by business scenar ...

  10. mongodb 副本集+分片集群搭建

    数据分片节点#192.168.114.26mongod --shardsvr --replSet rsguo --port 2011 --dbpath=/data/mongodb/guo --logp ...