SCSS笔记
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笔记的更多相关文章
- 前端之Sass/Scss实战笔记
简介 Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正 ...
- scss 学习笔记
由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .re ...
- scss 初学笔记 一 变量声明 默认的样式 嵌套
$width: 300px !default; $: 变量声明符号; width: 变量名称; 300px: 赋予变量的值; !default 代表默认样式 !defau ...
- Scss - 简单笔记
原文链接:scss 教程 手头上疯狂在用 scss,虽然可以在里面写原生的 css, 但是为了保持风格的一致性,还是滚去看了看 scss 文档. 一.变量 变量的引入是 scss 的一个核心特性,变量 ...
- Vue笔记:在项目中使用 SCSS
背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...
- scss学习笔记
1.引用父选择符: & #main { color: black; a { font-weight: bold; &:hover { color: red; } } } 2.font: ...
- SCSS学习笔记(一)
SCSS的由来 SCSS就是加强版的CSS,要讲SCSS那就一定要从SASS讲起 SASS Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hamp ...
- scss 初学笔记 三 继承
//继承 .btn{ padding: 4px 10px; font-size: 14px; } .primary{ background:red; @extend .btn; } //%placeh ...
- scss 初学笔记 二 混合宏
混合宏 格式 @mixin 定义混合宏 (相当于变量声明 var $ ?) //不带参数混合宏 @mixin borderRadius{ -webkit-border-radius: 5px; b ...
随机推荐
- spring Cloud负载均衡Ribbon
Ribbon饥饿加载 默认情况下Ribbon是懒加载的.当服务起动好之后,第一次请求是非常慢的,第二次之后就快很多. 解决方式:开启饥饿加载 ribbon: eager-load: enabled: ...
- 01-Python初体验
本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...
- sublime配置C++编译环境
配置C++编译命令 { "file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$", "workin ...
- CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合. 如果都是正边界,结果的边界宽度是 ...
- laravel模板使用
{{ $var }} - 打印内容 {{ $var or 'default' }} - 打印内容并带一个默认值 {{{ $var }}} - 打印转义内容 {{-- Comment --}} - 注释 ...
- ecshop php商城系统数据库结构及表的介绍分析
ecshop共86张表,确实比较多,不过功能确实最完善的. 表结构分析 ecs_account_log // 用户账目日志表 ecs_activity // 活动表(代码,名称,开始,结束,描述) ...
- Trouble and solution
Prevent the CTRL from rebooting in loop killall scm watch echo 1 > /dev/watchdog& Install Git ...
- TensorFlow从0到1之XLA加速线性代数编译器(9)
加速线性代数器(Accelerated linear algebra,XLA)是线性代数领域的专用编译器.根据 https://www.tensorflow.org/performance/xla/, ...
- Android学习笔记基于监听的事件处理
事件处理流程 代码格式: Button btn1 = findViewById(R.id.btn1); btn1.setOnClickListener(new View.OnClickListener ...
- Laravel:No application encryption key has been specified.
其实吧,这个就是你没有生成密钥 你首先去看看,如果是刚刚下载的lavavel应该会有一个.env.example文件在根目录下,然后修改这个文件名,改成.env 然后用命令行去执行php artisa ...