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. 05-IntentFilter的匹配规则

    IntentFilter的匹配规则 原则上一个Intent不应该既是显示调用又是隐式调用,如果二者共存的话以显式调用为主 隐式调用需要Intent能够匹配目标组件的IntentFilter中所设置的过 ...

  2. Python数据分析软件包介绍

    Python数据分析主要软件包: 1.python -m pip install numpy 2.python -m pip install pandas 3.python -m pip instal ...

  3. jstl中<c:if>标签属性用法

    今天用jstl+el从session域中获取属性,遇到了问题 org.apache.jasper.JasperException: <h3>Validation error message ...

  4. SpringMVC+Mybatis初尝试

    一个月前简单学完了SpringMVC框架和Mybatis框架,一直没有使用过,今天主要用它做了个简单的学生管理系统,不过第一次用框架,实现的功能简单,比较low. 注:这里使用的数据库是SQLServ ...

  5. thinkphp5集成GatewayWorker

    Workerman是一款纯PHP开发的开源高性能的PHP socket 服务器框架,而GatewayWorker则是基于Workerman开发的一个长连接框架,支持分布式部署,支持全局广播或者向任意客 ...

  6. 【请帮帮我】为什么www.52pjb.net总是不收录,最多只收录首页?

    做的好多个网站百度搜索都百度收录了,可是在其中一个一直不百度收录?http://www.52pjb.net,求大神帮忙看看,很着急很着急

  7. Clear Writer v1.8 更新

    拖更了这么久之后,Clear Writer 诈尸啦(bushi 下载链接:https://linhongping.lanzous.com/ikF2Udmf7if Clear Writer v1.8 更 ...

  8. 涨姿势了解一下Kafka消费位移可好?

    摘要:Kafka中的位移是个极其重要的概念,因为数据一致性.准确性是一个很重要的语义,我们都不希望消息重复消费或者丢失.而位移就是控制消费进度的大佬.本文就详细聊聊kafka消费位移的那些事,包括: ...

  9. Spring Boot入门系列(十八)整合mybatis,使用注解的方式实现增删改查

    之前介绍了Spring Boot 整合mybatis 使用xml配置的方式实现增删改查,还介绍了自定义mapper 实现复杂多表关联查询.虽然目前 mybatis 使用xml 配置的方式 已经极大减轻 ...

  10. vue事件修饰符与按钮修饰符

    事件修饰符:(当事件无需传参数时可直接写成以下形式,有参数时则为@click.stop="handleLiClick($event)") stop:阻止事件冒泡行为(子元素被点击, ...