sass的@at-root

一、首先理解sass的嵌套中 &表示是什么?

&表示整个选择器,而不单个class属性值或id属性值或tagName。例如下面一段代码:

.a {
    .b {
        & {
            color: #fff;
        }
    }
}

&这里表示

.a .b

而不能够理解&表示 “.b”

----------------------------------------------------------------------

二、@at-root的理解

@at-root 表示在选择器嵌套的最外层,如果@at-root到第一个 {} 之间没有人选择器,是会报错的, 所以常常和&配合用。  

时间: 2024-08-09 02:19:12

sass的@at-root的相关文章

sass个人学习笔记

Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3cplus.com/sassguide/ 个人先看了 <Sass与Compass实战>(Materliu 是中文翻译之一)后看的视频,看书的时候不是很了解看了视频之后又看了一遍书终于少许了解sass了 下面是我个人对<Sass与Compass实战>这本书学习笔记总结,有些是个人极端自我

compass reset和layout [Sass和compass学习笔记]

reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset" layout 有几个常见的布局函数,我觉得挺管用,其他的都是用来写组建非常常用的 Sticky Footer 该模块提供了需要布置你的页脚,它坚持到页面底部的工具. 这个模块主要用于布局页脚,可以让页脚固定在页面的最底部,是一个比较常用的功能,而且有配套的html代码 引用方法 @import

CSS预处理器Sass(Scss)、Less、Stylus

CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如gulp转换成标准的CSS语法,从而在浏览器中运行.个人理解它是标准CSS语法的扩展及增强,能在一定程度上提高编码效率. 三种预处理器的对比: Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持:安装.编译依赖Ruby环境: Stylus早期服务器Node JS项目,在该

Sass控制命令及函数知识整理

2017-07-07  20:17:17 最底部附结构图(实在是结构图太长了没办法) 2017-06-22  09:11:43 一.Sass的控制命令 [email protected]语句 @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块. 在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. 示例::控制一个元素隐藏或显示的代码, 原理:定义一个混合宏,通过 @

CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L

sass学习笔记--摘录

//$a: Helvetica, sans-serif //$b: #333 // //body //font: 100% $a //color: $b //$a: red //body //color: $a $a: red .box color:  $a color前的空格必须,red和$a前的空格必须 可以用koala快速执行编译输出 ---http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html 嵌套输出方式 nested

less和sass的介绍和差异

● 混入(Mixins)——class中的class: ● 参数混入——可以传递参数的class,就像函数一样: ● 嵌套规则——Class中嵌套class,从而减少重复的代码: ● 运算——CSS中用上数学: ● 颜色功能——可以编辑颜色: ● 名字空间(namespace)——分组样式,从而可以被调用: ● 作用域——局部修改样式: ● JavaScript 赋值——在CSS中使用JavaScript表达式赋值. LESS和Sass的主要不同就是他们的实现方式,LESSS是基于JavaScr

LESS介绍及其与Sass的差异

自从一个月前我偶然发现LESS之后我就开始坚定的使用它了.CSS本身对我来说从来不是问题,但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的想法.拥有一个提供固定数量选项可选的色盘可以让我避免颜色太跳跃以至于从一个已定的风格中脱离. 事实证明,LESS——以及Sass——功能比这个要多太多.LESS和Sass在语法上有些共性,比如下面这些: ● 混入(Mixins)——class中的class: ● 参数混入——可以传递参数的class,就像函数一样: ● 嵌套规则——Class

CSS3(七 ) 前端预处理技术(Less、Sass、CoffeeScript)

目录 一.Less 1.1.概要 1.2.变量 1.3.解析Less 1.3.1.在线处理 1.3.2.预处理 1.4.混入(Mixins) 1.5.嵌套 1.6.运算 1.7.函数 1.8.继承 1.9.作用域 1.10.注释 二.Sass 2.1.变量 2.2.嵌套 2.3.导入 2.4.mixin 混入 2.5.扩展/继承 2.6.运算 2.7.函数 2.8.流程控制 三.CoffeeScript 3.1.安装 3.2.使用 四.TypeScript 4.1.安装 4.2.使用typesc

Sass进阶之路,之一(基础篇)

Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护. 那么css预处理器与Sass有什么关系呢,Sass就是属于css预处理器中的一种,还有两款他们分别是Less和 Stylus,这里就不做过多的介绍了. 什么是Sass sass是一种css的开发工具,提供了很多便利的写法,不但使css