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 ...
随机推荐
- elementUI+国际化
1. 先创建一个lang 文件夹,创建两个js文件en.js(英文), zh.js(中文), 另外创建一个index.js文件(用于) en.js zh.js (两者必须保持一致) 2. 在index ...
- mysql 双机互备份
//1.创建用户CREATE USER 'dump'@'%' IDENTIFIED BY 'dump'; //2.开放权限GRANT ALL ON *.* TO 'dump'@'%'; //3.刷新权 ...
- Mac Book 问题汇集
1.mac wifi 无法连接问题 1. 由于插入的USB 转接头导致,USB转接口带有网线插口,机器默认网页接口接口导致. 解决方案: 拔掉转接口,连上WiFi ,再插入转接口使用 2.可以是路由器 ...
- 2.使用nexus3配置docker私有仓库
1,配置走起 1,创建blob存储 登陆之后,先创建一个用于存储镜像的空间. 定义一个name,下边的内容会自动补全. 然后保存. 注意:实际生产中使用,建议服务器存储500G或以上. 2,创建一个h ...
- 线性代数的28法则:作为程序员掌握这些API就够用了……
目录 1. 向量 & 矩阵 1.1. 问: np.ndarray 与 np.matrix 的区别 1.2. 向量空间 2. 算术运算 2.1. 为什么线性代数定义的乘积运算不按照加法的规则(按 ...
- Ubuntu18.04下使用Hexo框架搭建个人博客
一.安装node.js 说明:安装node.js的原因:Hexo框架是基于node.js. 1.推荐使用nvm安装速度快,也可自行百度其它方法. wget -qO- https://raw.githu ...
- Java——int、double型数组常用操作工具类
学了数组之后,感觉有好多操作需要经常去写,很不方便,因此自己做了一个工具类,方便调用,方法可能不全,希望大家可以添加,让我使用也方便一点儿. public class ArrayUtils { //求 ...
- unittest实现用例运行失败截图
把这个方法放到父类basecase(unittest.TestCase)就行了 #coding: utf-8 import unittest, random, os, traceback from s ...
- 034.Kubernetes集群安全-Secret
一 secret概述 1.1 secret作用 Secret对象,主要作用是保管私密数据,比如密码.OAuth Tokens.SSH Keys等信息.将这些私密信息放在Secret对象中比直接放在Po ...
- Android笔记布局资源文件
在项目的res--layout目录下的文件叫布局资源文件,用于控制页面的布局显示 在Java代码中引用布局资源我们已经很熟悉了. setContentView(R.layout.activity_ma ...