Sass 中的 @ 规则
一、 @import
Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
例如: @import "foo.scss";
二、 @extend 是用来扩展选择器或占位符。
三、 @at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
示例:
.a {
color: red; .b {
color: orange; .c {
color: yellow; @at-root .d {
color: green;
}
}
}
}
输出:
a {
color: red; }
.a .b {
color: orange; }
.a .b .c {
color: yellow; }
.d {
color: green; }
四、错误调试
@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug
@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。
@error 和 @warn、@debug 功能是如出一辙。
Sass 中的 @ 规则的更多相关文章
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- sass中出现的中文问题
在这园子里看到了很多优秀的资源,自己也想写写东西,就突然想到了以前遇到写sass的时候出现中文乱码的解决方案.所有就自己又总结了一下.(以下测试步骤都是自己完成的!没有任何转载,如有错误,希望大家指正 ...
- Apache中 RewriteRule 规则参数介绍
Apache中 RewriteRule 规则参数介绍 摘要: Apache模块 mod_rewrite 提供了一个基于正则表达式分析器的重写引擎来实时重写URL请求.它支持每个完整规则可以拥有不限数量 ...
- Sass中的Map 详解
Sass中的Map长什么样 Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现, Sass 的 map 长得与 JSON 极其相似. json: ...
- Sass中常用的函数
字符串函数 To-upper-case() 函数将字符串小写字母转换成大写字母 To-lower-case() 函数 与 To-upper-case() 刚好相反,将字符串转换成小写字母 数字函数 S ...
- sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点
初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...
- css编译工具Sass中混合宏,继承,占位符分别在什么时候使用
//SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...
- SASS 中变量的默认值
SASS 中定义的变量,后设置的值会覆盖旧的值. $color: red; $color: blue; .btn { color: $color; } 编译后为: .btn { color: blue ...
- SQL Server 与MySQL中排序规则与字符集相关知识的一点总结
字符集&&排序规则 字符集是针对不同语言的字符编码的集合,比如UTF-8字符集,GBK字符集,GB2312字符集等等,不同的字符集使用不同的规则给字符进行编码排序规则则是在特定字符集的 ...
随机推荐
- spring - ioc和aop
1.程序中为什么会用到spring的ioc和aop 2.什么是IOC,AOP,以及使用它们的好处,即详细回答了第一个问题 3.原理 关于1: a:我们平常使用对象的时候,一般都是直接使用关键字类new ...
- BZOJ4241 历史研究
Description IOI国历史研究的第一人——JOI教授,最近获得了一份被认为是古代IOI国的住民写下的日记.JOI教授为了通过这份日记来研究古代IOI国的生活,开始着手调查日记中记载的事件. ...
- java内存模型及GC原理
java内存模型 sun官方网站:sun java 虚拟机模型 JVM内存模型中分两大块,一块是 NEW Generation, 另一块是Old Generation. 在New Generation ...
- abstract 类也可以继承 实体类
public class BaseReq { public String UserId { get; set; } public BaseReq() { } } public abstract cla ...
- js的基础学习
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便. <!DOCTYPE html> <html> <body> <h1> ...
- JDBCTemplate基础学习
JDBCTemplate:spring提供的用于操作数据库的模板,类似DbUtils.使用时必须设置数据源(DataSource):数据源如DBCP.C3P0等 一.JDBCAPI简单使用Demo 1 ...
- java ssl https 连接详解 生成证书
我们先来了解一下什么理HTTPS 1. HTTPS概念 1)简介 HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全 ...
- Android Studio-设置override及getter/setter方法
默认是Alt+Insert,可以修改成与Eclipse保持一致,Alt+Shift+S
- 百科编辑器ueditor应用笔记
最近项目上要用到文本编辑器,选了百科开源的ueditor,使用过程中虽然有些问题,但是一个个都解决了,记录如下: 开发的项目环境是vs2012:.net4.0: 1:百度js编辑器,编辑器加载到项目中 ...
- Grunt之项目脚手架
在网上搜了下,grunt这方面的教程挺少的,来去都是一些被频繁转载的文章.唉,人艰不拆啊. 首先我们在全局环境中安装grunt-init. npm install -g grunt-init 来看看官 ...