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. Android fastjson

    Fastjson介绍 Fastjson是一个Java语言编写的JSON处理器. 1.遵循http://json.org标准,为其官方网站收录的参考实现之一. 2.功能qiang打,支持JDK的各种类型 ...

  2. WebService性能测试

    什么是WebService?(本文也会在最下面通俗的介绍) 这里给一个站内大哥的讲解:http://www.cnblogs.com/Leo_wl/archive/2010/05/20/1740205. ...

  3. sql优化1

    1.mysql里面的索引 对于 like关键字匹配查询,适用于like name%,但是不适用于%name%;添加索引时候注意这点 2.mysql的limit分页 ,limit 2,5;表示每页显示5 ...

  4. mybatis ${}使用注意事项

    ${key}有值, ${key,jdbcType=VARCHAR}没有值 总结:${}使用时不要指定jdbcType等属性,指定这些反而取不到值,这也是跟#{}的一个区别.以上只是开发中遇到的情况,具 ...

  5. 旋转数组的最小数字(C++ 和 Python 实现)

    (说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的 ...

  6. 网站的Information Architecture--构建一个最优用户体验的site structure

    http://conversionxl.com/website-information-architecture-optimal-user-experience/ 在网站上应该有什么类型的conten ...

  7. js 巧妙去除数组中的重复项

    1.代码如下: var toObject = function(a) { var o = {}; for (var i=0, j=a.length; i<j; i=i+1) { // 这里我调整 ...

  8. laravel5.5 自定义验证规则——手机验证RULE

    相信很多小伙伴和我一样烦恼,laravel没有自带手机号的验证,每次验证手机号都要写正则这类的规则,每次都是repeat yourself!违背了编码的一个原则,就是Don't repeat your ...

  9. 学习Road map Part 03 编程和算法

    方法: 优先重复已学过的内容 写学习笔记

  10. 8.spring:事务管理(上):Spring的数据库编程、编程式事务管理

    Spring的数据库编程 Spring框架提供了JDBC模板模式------>JdbcTemplate 简化了开发,在开发中并不经常是使用 实际开发更多使用的是Hibernate和MyBatis ...