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. layui导出表格的两种方法

    一.不熟悉layui小白使用方法 1.引入如下js文件: 2.编写如下函数: 3.表格ID要与函数取值保持一致即可,再就是自定义一个按钮触发事件 二.引入插件使用方法 1.layui官网下载插件包: ...

  2. CentOS7——初始化

    CentOS7--初始化 #禁止关闭显示器 archlinux wiki 提及的方法 echo -ne "\033[9;0]" >> /etc/issue # 重启,c ...

  3. 君荣一卡通软件mysql转sqlserver 教程

    Mysql数据库转sql数据库方法 注意:新建的SQL数据库一得先登录一次后再做迁移!!!!特别注意 如果客户以前安装的是mysql数据库,现在希望把mysql数据库转换的sql数据库,方法如下: 1 ...

  4. WAMP3.1 安装php_redis.dll扩展并配置php.ini

    一. 下载对应版本的php_redis.dll 下载地址:http://windows.php.net/downloads/pecl/releases/redis 注:php7目录下有php7.dll ...

  5. 【原创】强撸基于 .NET 的 Redis Cluster 集群访问组件

    Hello 大家好,我是TANZAME,我们又见面了.今天我们来聊聊怎么手撸一个 Redis Cluster 集群客户端,纯手工有干货,您细品. 随着业务增长,线上环境的QPS暴增,自然而然将当前的单 ...

  6. mysql大表在不停机的情况下增加字段该怎么处理

    MySQL中给一张千万甚至更大量级的表添加字段一直是比较头疼的问题,遇到此情况通常该如果处理?本文通过常见的三种场景进行案例说明. 1. 环境准备 数据库版本: 5.7.25-28(Percona 分 ...

  7. Nginx 如何自定义变量?

    之前的两篇文章 Nginx 变量介绍以及利用 Nginx 变量做防盗链 讲的是 Nginx 有哪些变量以及一个常见的应用.那么如此灵活的 Nginx 怎么能不支持自定义变量呢,今天的文章就来说一下自定 ...

  8. 微信小程序-返回并更新上一页面的数据

    小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据. 一般的办法是把当前页面数据放入本地缓存,上一个页面再从缓存中取出. 除此之外还 ...

  9. Merge,Rebase,Cherry-Pick 一文解惑

    代码合并在日常开发中是较为常见的场景,采用合适的合并方式,可以起到事半功倍的效果.对应在 Git 中合并的方式主要有三个,Merge,Rebase,Cherry-Pick. 开始部分会首先介绍一下这三 ...

  10. 吃货联盟订餐系统 源代码 Java初级小项目

    咳咳,今天博主给大家写一个小的项目:吃货联盟订餐系统.博主不是大神(互联网架构师的路上ing),也是小白一个,不过是刚入门的小白^_^.项目功能也很简单:只是模拟日常的订餐流程呦,所以有错误以及功能不 ...