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. class 类前向声明

    /*   使用前向引用声明虽然可以解决一些问题,但它并不是万能的.需要注意的是,   尽管使用了前向引用声明,但是在提供一个完整的类声明之前,不能声明该类的对象,   也不能在内联成员函数中使用该类的 ...

  2. windows注册表删除右键菜单

    1.删除空白处右键菜单 HKEY_CLASSES_ROOT\Directory\background\shell HKEY_CLASSES_ROOT\Directory\background\shel ...

  3. 朋友,您可能是MCR的受害者

    2018 年五月之后,微软将后续发布的所有 docker image 都推送到了 MCR (Miscrosoft Container Registry),但在中国大陆,它的速度实在是令人发指,本文将介 ...

  4. ubuntu安装ssh服务器

    1.安装 sudo apt-get install openssh-server 2.配置文件路径 / etc/ssh/sshd_config 3.操作 sudo /etc/init.d/ssh st ...

  5. python常用模块-os

    得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 返回指定目录下的所有文件和目录名:os.listdir() 函数用来删除一个文件:os.remove() 删除多个目录 ...

  6. python + selenium登陆并点击百度平台

    from PIL import Imagefrom selenium.webdriver import DesiredCapabilitiesfrom selenium import webdrive ...

  7. CentOS7.5搭建Hive2.3.3

    一 Hive的下载 软件下载地址:https://mirrors.tuna.tsinghua.edu.cn/apache/hive/  这里下载的版本是:apache-hive-2.3.3-bin.t ...

  8. 用python做时间序列预测九:ARIMA模型简介

    本篇介绍时间序列预测常用的ARIMA模型,通过了解本篇内容,将可以使用ARIMA预测一个时间序列. 什么是ARIMA? ARIMA是'Auto Regressive Integrated Moving ...

  9. 厉害了!除了find命令,还有这么多文件查找命令,高手必备!

    大家好,我是良许. 在系统里查找文件,是所有工程师都必备的技能(不管你用的是 Windows .Linux.还是 MacOS 系统).对于 Linux 操作系统,单单一个 find 命令就可以完成非常 ...

  10. Android学习笔记尺寸资源

    尺寸资源语法 dp:设备独立资源像素 会根据设备匹配大小 一般用于设置边距和组件大小 sp : 可伸缩像素 根据用户手机字体大小首选项进行缩放 使用尺寸资源 定义尺寸资源 dimens <?xm ...