SASS是成熟,稳定,强大的 CSS预处理器 ,而 SCSS 是SASS3版本当中引入的新语法特性,完全兼容CSS3的同时继承了CSS强大的动态功能。

CSS书写代码规模较大的web应用时,容易造成选择器,层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量,嵌套,混合,继承等特性,让CSS的书写更加有趣和程式化。

1.变量

SASS中可以定义变量,用来存储需要在CSS中复用的信息,方便统一修改和维护。

sass代码:

$blue:#1875e7;
div {
color : $blue;
}

对应生成的css代码:

div {
color : #1875e7;
}

如果变量需要镶嵌在字符串中,就必须写在  #{}  中:

$side : left;
.rounded{
border-#{$side}-radius : 5px;
}

2.嵌套

SCSS笔记的更多相关文章

  1. 前端之Sass/Scss实战笔记

    简介 Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正 ...

  2. scss 学习笔记

    由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .re ...

  3. scss 初学笔记 一 变量声明 默认的样式 嵌套

    $width: 300px !default; $:          变量声明符号; width:    变量名称; 300px:   赋予变量的值; !default  代表默认样式 !defau ...

  4. Scss - 简单笔记

    原文链接:scss 教程 手头上疯狂在用 scss,虽然可以在里面写原生的 css, 但是为了保持风格的一致性,还是滚去看了看 scss 文档. 一.变量 变量的引入是 scss 的一个核心特性,变量 ...

  5. Vue笔记:在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  6. scss学习笔记

    1.引用父选择符: & #main { color: black; a { font-weight: bold; &:hover { color: red; } } } 2.font: ...

  7. SCSS学习笔记(一)

    SCSS的由来 SCSS就是加强版的CSS,要讲SCSS那就一定要从SASS讲起 SASS Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hamp ...

  8. scss 初学笔记 三 继承

    //继承 .btn{ padding: 4px 10px; font-size: 14px; } .primary{ background:red; @extend .btn; } //%placeh ...

  9. scss 初学笔记 二 混合宏

    混合宏 格式  @mixin 定义混合宏 (相当于变量声明 var  $ ?) //不带参数混合宏 @mixin borderRadius{ -webkit-border-radius: 5px; b ...

随机推荐

  1. STM32F429时钟不正确导致串口无法正确收发

    老早之前自己做了块F4的板子,设计原理图时没有去找官方参考,看了手册后就开工了,做完板子回来测试串口发现PC端接收到的都是乱码,尝试了几种波特率也没能正确接收,串口的代码是官方参考例程的,不应该有问题 ...

  2. Windows下虚拟机Linux(CentOS8)扩容设置 - 磁盘扩容中的坑和解决方法

    摘要:[原创]转载请注明作者Johnthegreat和本文链接 由于虚拟机空间不足,为了避免重装虚拟机,做了一次无损扩容.   过程中的报错如下: [root@localhost ~]# pvcrea ...

  3. Java学习之第二天

    一.流程控制 1.顺序结构:自上而下,依次执行(从上到下,一直走下去) 2.选择结构:(1)if .if—else.嵌套if (2)switch(mod){ case 1:执行代码 case 2:执行 ...

  4. matplotlib 示例

    示例1 import numpy as np import matplotlib.pyplot as plt #plt.rcParams['font.family'] = ['sans-serif'] ...

  5. Sequence in the Pocket【思维+规律】

    Sequence in the Pocket 题目链接(点击) DreamGrid has just found an integer sequence  in his right pocket. A ...

  6. Microsoft SQL Server Migration Assistant for MySQL(从MySQL迁移表数据到MSSQL2008R2)_3

    环境: 英文版(Windows7 64 bit + MySQL8.0.18 64 bit + MSSQL2008R2 64 bit)                           Microso ...

  7. [每日一题2020.06.17] leetcode周赛T3 5438 制作m束花所需的最少天数 二分搜索

    题目链接 这题我开始一直在想如何在数组上dp操作搜索区间, 很蠢, 实际上用二分查找的方法可以很快的解决 首先我们通过一个函数判断第x天是否符合题意, 如果x天可以做出m束花, 那么大于m的天数必然可 ...

  8. 数据库(mysql)基础操作

    DDL(数据定义语言)------>建库,建表 DML(数据操作语言)------>对表中的记录操作增删改查 DQL(数据查询语言)------>对表中的查询操作 DCL(数据控制语 ...

  9. 动态调试 别人写的jar包

    在别人的jar应用程序里: 在VMoption选项中添加: -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=50064 或者 ...

  10. JVM对算术运算做了什么??

    java可以进行数字的加减乘除,但是JVM的运算步骤是什么样子呢?从一个神奇的式子入手,研究下JVM到底做了什么? 先看下图: