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. Spring-AOP之工作实践(二)

    案例二.前端页面权限控制 对controllor控制器中的某写方法进行增强,如实现页面的按钮权限控制. /** * 保存session的容器 */ public class SessionContex ...

  2. 深入理解JVM(③)各种垃圾收集算法

    前言 从如何判定对象消亡的角度出发,垃圾收集算法可以划分为"引用计数式垃圾收集"(Reference Counting GC)和"追踪式垃圾收集"(Tracin ...

  3. @uoj - 310@ 【UNR #2】黎明前的巧克力

    目录 @description@ @solution@ @accepted code@ @details@ @description@ Evan 和 Lyra 都是聪明可爱的孩子,两年前,Evan 开 ...

  4. (八)利用 Profile 构建不同环境的部署包

    接上回继续,项目开发好以后,通常要在多个环境部署,象我们公司多达5种环境:本机环境(local).(开发小组内自测的)开发环境(dev).(提供给测试团队的)测试环境(test).预发布环境(pre) ...

  5. 【JMeter_08】JMeter逻辑控制器__While控制器<While Controller>

    While控制器<While Controller> 业务逻辑: 当条件为非false时,执行该节点下的脚本内容,判断条件包括数字.null.空白.字母.符号.true. 当条件为fals ...

  6. cb06a_c++_顺序容器的定义

    /*cb06a_c++_顺序容器的定义顺序容器:vector,数组,尾端操作数据,快速随机访问list 链表,快速插入数据deque数组,双端-首尾操作数据,方便两端的数据访问 顺序容器适配器:sta ...

  7. 西门子S7-300 PLC视频教程(百度网盘)收集于网络-供参考学习

    百度网盘地址: 西门子300 PLC视频教程 群文件里面可以找到. 下载: https://blog.csdn.net/txwtech/article/details/93016190

  8. 国外一教授坦言,用这方法能迅速成为python程序员,但都不愿意说_编程小十

    越来越多的人学习python,但你学习python用了多长的时间?#Python# 你知道如何才能迅速掌握并成为python程序员吗?   有这样的一位国外的教授说,要迅速成为python程序员,几乎 ...

  9. Java工程中各种带有O的对象分类笔记

    在Java工程里面,我们总会碰到各种不同的带有O的对象, 对于一个小白来说,经常会混淆这些对象的使用场景,所以在这里mark一下,让自己的代码更加规范,但这个也是Java被诟病的地方,不同的业务需要给 ...

  10. 谁再悄咪咪的吃掉异常,我上去就是一 JIO

    又到周末了,周更选手申请出站~ 这次分享一下上个月碰到的离奇的问题.一个简单的问题,硬是因为异常被悄咪咪吃掉,过关难度直线提升,导致小黑哥排查一个晚上. 这个美好的晚上,本想着开两把 LOL 无限火力 ...