sass 变量的声明 嵌套
sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。 $baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
编译后的css代码:
body{
line-height:2;
}
全局变量和局部变量
全局变量是定义在外面的变量
局部变量是定义在括号里面的变量,在局部里面调用同名变量,就是在调用局部变量,布局变量不会污染外面的全局变量
Sass 的嵌套分为三种:
- 选择器嵌套
- 属性嵌套
- 伪类嵌套
假设我们有一段这样的结构:
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
那么在 Sass 中,就可以使用选择器的嵌套来实现:
nav {
a {
color: red; header & {
color:green;
}
}
}
&是取父值
他的父亲是 nav a
所以header & = header nav aSass 中还提供属性嵌套,CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right,与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了:
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
在 Sass 中我们可以这样写:
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}伪类嵌套。&:before 或 &:after .clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}
编译出来的 CSS:
clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
sass 变量的声明 嵌套的更多相关文章
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- TypeScript语法学习--变量的声明
JavaScript里相对较新的变量声明方式是let和const.let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题. const是对let的一个增强,它能阻止 ...
- 如何设置 sass 全局变量,js如何使用 sass 变量
关键词:sass全局变量 js引用sass变量 1 如何在样式中使用 scss 的声明的全局变量 假设我们有一个全局的 scss 变量文件/styles/_vars.sass,如下: $red: re ...
- [Golang学习笔记] 05 程序实体2 作用域访问权限和变量重声明
作用域访问权限: 程序实体访问权限(作用域)有三种:1. 包级私有(代码包)2. 模块级私有(代码包)3. 公开(全域). 一个函数是一个代码块.一个程序实体的作用域总是会被限制在某个代码块中.好处: ...
- sass变量
sass变量用法 1.sass变量必须以$符开头,后面紧跟着变量名 2.变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样) 3.如果值后面加上!default则表示默认值 默认变量 ...
- sass变量的作用域
嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量). <div class="test">111111111& ...
- MFC中成员变量的声明顺序与析构顺序
第一次用博客,第一篇随笔,就写今天遇到的一个问题吧. 在VS2008的MFC对话框程序,窗口成员变量的声明顺序与其析构顺序相反,即,先声明的变量后析构,后声明的变量先析构.未在其他模式下测试. cla ...
- javascript中的函数式声明与变量式声明
观察下面两段代码,试写出hello('word');的运行结果: // 变量式声明 function hello(msg){ alert(msg); var msg = function(){}; a ...
- 今天第一次接触到typescript,看了第一个知识点就是变量的声明,来回忆回忆,做做笔记
以前只用过JavaScript原生写网站特效,今天还是第一次听说typescript的,然后看了一下它的基本知识,感觉很像Java,真的太像了,但是又有不同点.很让我惊奇看到的第一个知识点就和以前不同 ...
随机推荐
- redis在php运行时出现错误
我的redis版本:3.2.8. redis安装教程,参考官方网站: https://redis.io/download 在网上多番查找,很多说是配置文件redis.conf中的: # bind 12 ...
- Getting Started with Processing 第十章——对象
不像原始数据类型boolean,int 和 float 只能存一个值,一个对象可以存很多值.但这也是我们讲的一部分,对象也是用相关函数将变量编组的一种方式. 域和方法 在对象的上下文中,一个变量被叫做 ...
- RepBaseRepeatMaskerEdition下载 | RepeatMasker
开源的生物信息世界居然有这么个需要注册才能下载的工具,开源世界不是怎么方便怎么来吗? 这个注册真的麻烦,这里上传了一个可以使用的版本. RepBaseRepeatMaskerEdition-20170 ...
- 关于Mysql 查询所有表的实时记录用于对比2个MySQL 库的数据是否异步
Xu言: 今天,为了研究一个MySQL主从同步开机后报错 问题,如下图 故障原因分析: 经过分析,可能是主从服务器开机顺序导致.(有待下次断电再次测试) 主从错误提示:日志读取错误的问题.解决方法:更 ...
- LeetCode--367--有效的完全平方数
问题描述: 给定一个正整数 num,编写一个函数,如果 num 是一个完全平方数,则返回 True,否则返回 False. 说明:不要使用任何内置的库函数,如 sqrt. 示例 1: 输入:16 输 ...
- 诡异的楼梯 HDU - 1180
Hogwarts正式开学以后,Harry发现在Hogwarts里,某些楼梯并不是静止不动的,相反,他们每隔一分钟就变动一次方向. 比如下面的例子里,一开始楼梯在竖直方向,一分钟以后它移动到了水平方向, ...
- 『Yaml』配置文件读写包
YAML 在Python中的配置应用 YAML 是专门用来写配置文件的语言,和JSON相近,都是对字典做规范化文件输出的 一.简介 YAML 语言(发音 /ˈjæməl/ )的设计目标,就是方便人类读 ...
- XXE漏洞
原理:XML外部实体注入,简称XXE漏洞,XML数据在传输中数据被修改,服务器执行被恶意插入的代码.当允许引用外部实体时,通过构造恶意内容,就可能导致任意文件读取.系统命令执行.内网端口探测.攻击内网 ...
- 更改 Windows 软件默认安装位置教程
在打开的“运行”窗口中,输入命令regedit,然后点击确定按钮 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion 百度 ...
- hdu-4738-tarjin/割边
http://acm.hdu.edu.cn/showproblem.php?pid=4738 求得是边权最小的割边,和求割点类似用tarjin,但要注意的是不能走从父亲过来的那一条边,在割点里那样理解 ...