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 a
    Sass 中还提供属性嵌套,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 变量的声明 嵌套的更多相关文章

  1. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  2. TypeScript语法学习--变量的声明

    JavaScript里相对较新的变量声明方式是let和const.let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题. const是对let的一个增强,它能阻止 ...

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

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

  4. [Golang学习笔记] 05 程序实体2 作用域访问权限和变量重声明

    作用域访问权限: 程序实体访问权限(作用域)有三种:1. 包级私有(代码包)2. 模块级私有(代码包)3. 公开(全域). 一个函数是一个代码块.一个程序实体的作用域总是会被限制在某个代码块中.好处: ...

  5. sass变量

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

  6. sass变量的作用域

    嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量). <div class="test">111111111& ...

  7. MFC中成员变量的声明顺序与析构顺序

    第一次用博客,第一篇随笔,就写今天遇到的一个问题吧. 在VS2008的MFC对话框程序,窗口成员变量的声明顺序与其析构顺序相反,即,先声明的变量后析构,后声明的变量先析构.未在其他模式下测试. cla ...

  8. javascript中的函数式声明与变量式声明

    观察下面两段代码,试写出hello('word');的运行结果: // 变量式声明 function hello(msg){ alert(msg); var msg = function(){}; a ...

  9. 今天第一次接触到typescript,看了第一个知识点就是变量的声明,来回忆回忆,做做笔记

    以前只用过JavaScript原生写网站特效,今天还是第一次听说typescript的,然后看了一下它的基本知识,感觉很像Java,真的太像了,但是又有不同点.很让我惊奇看到的第一个知识点就和以前不同 ...

随机推荐

  1. redis在php运行时出现错误

    我的redis版本:3.2.8. redis安装教程,参考官方网站: https://redis.io/download 在网上多番查找,很多说是配置文件redis.conf中的: # bind 12 ...

  2. Getting Started with Processing 第十章——对象

    不像原始数据类型boolean,int 和 float 只能存一个值,一个对象可以存很多值.但这也是我们讲的一部分,对象也是用相关函数将变量编组的一种方式. 域和方法 在对象的上下文中,一个变量被叫做 ...

  3. RepBaseRepeatMaskerEdition下载 | RepeatMasker

    开源的生物信息世界居然有这么个需要注册才能下载的工具,开源世界不是怎么方便怎么来吗? 这个注册真的麻烦,这里上传了一个可以使用的版本. RepBaseRepeatMaskerEdition-20170 ...

  4. 关于Mysql 查询所有表的实时记录用于对比2个MySQL 库的数据是否异步

    Xu言: 今天,为了研究一个MySQL主从同步开机后报错 问题,如下图 故障原因分析: 经过分析,可能是主从服务器开机顺序导致.(有待下次断电再次测试) 主从错误提示:日志读取错误的问题.解决方法:更 ...

  5. LeetCode--367--有效的完全平方数

    问题描述: 给定一个正整数 num,编写一个函数,如果 num 是一个完全平方数,则返回 True,否则返回 False. 说明:不要使用任何内置的库函数,如  sqrt. 示例 1: 输入:16 输 ...

  6. 诡异的楼梯 HDU - 1180

    Hogwarts正式开学以后,Harry发现在Hogwarts里,某些楼梯并不是静止不动的,相反,他们每隔一分钟就变动一次方向. 比如下面的例子里,一开始楼梯在竖直方向,一分钟以后它移动到了水平方向, ...

  7. 『Yaml』配置文件读写包

    YAML 在Python中的配置应用 YAML 是专门用来写配置文件的语言,和JSON相近,都是对字典做规范化文件输出的 一.简介 YAML 语言(发音 /ˈjæməl/ )的设计目标,就是方便人类读 ...

  8. XXE漏洞

    原理:XML外部实体注入,简称XXE漏洞,XML数据在传输中数据被修改,服务器执行被恶意插入的代码.当允许引用外部实体时,通过构造恶意内容,就可能导致任意文件读取.系统命令执行.内网端口探测.攻击内网 ...

  9. 更改 Windows 软件默认安装位置教程

    在打开的“运行”窗口中,输入命令regedit,然后点击确定按钮 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion 百度 ...

  10. hdu-4738-tarjin/割边

    http://acm.hdu.edu.cn/showproblem.php?pid=4738 求得是边权最小的割边,和求割点类似用tarjin,但要注意的是不能走从父亲过来的那一条边,在割点里那样理解 ...