Sass/Scss 基础篇
2024-08-28 07:49:24
Sass/Scss 基础篇
总结Sass学习到的内容
应用Sass/Scss前，环境配置
- 首先下载Ruby (http://rubyinstaller.org/downloads)
- 通过命令下载sass gem install sass
- VScode配置 下载插件 Live Sass Compiler
- VScode配置 配置工作区中的setting.json
"liveSassCompile.settings.formats":[
// 扩展
{
"format": "compact",//可定制的出口CSS样式（expanded，compact，compressed，nested）
"extensionName": ".min.css",//编译后缀名
"savePath": null//编译保存的路径
} ],
"liveSassCompile.settings.generateMap": false, //不生成map文件
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
** // 只是编译当前的sass文件
],
"liveSassCompile.settings.autoprefix": [
"> 1%", //">1%"是指 通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本。
"last 3 versions" //"last 3 versions"是指 每个浏览器的最后3个版本。
或
"ie >= 6", //ie6以上
"firefox >= 8",
"chrome >= 24",
"Opera>=10"
]
Sass与Scss的区别
Sass编译写法偏向于Python 没有大括号{}以及分号；
Scss编译写法偏向于CSS 有大括号和分号编译方法
- 命令编译
<Sass文件PATH> : <编译后的CSS文件的PATH> (单文件)
sass/ : css/ (多文件)
sass --watch 自动监测代码变化，自动编译 - GUI编译 （VScode的自动编译 上面已配置）
- 自动化编译 Grunt和Gulp自动化 <cm: 后期要把这部分补上>
- 命令编译
编译出的样式
- 嵌套 -- nested 大括号不单都占行
- 展开 -- expanded 大括号单都占行
- 紧凑 -- compact 每项只占一行
- 压缩 -- compressed 全部一行 （后期推荐使用此方法，减轻文件所占内存）
Sass/Scss 基础知识
默认变量声明：
$btn-primary-color : #fff !default;
想要改变默认值要在默认语句前面定义注释： //不在编译后CSS文件中显示 /* */在编译后CSS文件中显示
数据类型：
数字，字符串，颜色，布尔值，空值，值列表（用空格或逗号分开）字符串:
有引号字符串"header-1"
无引号字符串 sans-serifbold
但是在使用插值的时候，无论调用的是否是无引号的字符串，都会被编译成无引号的字符串值列表：
nth：访问值列表的某一项（第几项）
append： 添加
join： 连接多个列表
@each：遍历值列表中的所有项目运算：
加 减 乘 除
乘法运算时： 20px * 2 后面的数字不能带单位
除法运算时：
在代码中"/"被认为是除法的情况：- 算式中有变量
- 除法算式被()包围
- 不只有除法运算时
当进行颜色运算时，十六进制#xxxxxx 当成十进制数字运算
Sass/Scss 常用标准方法--重要
嵌套：
-- 父类子类嵌套
- 选择器嵌套
- 属性嵌套
- 伪类嵌套
注：尽量避免使用选择器嵌套，避免选择器太具体。否则对于后期维护，以及代码可读性都有很差的体验
混合宏：@mixin （重点）
-- 相当于用于被调用的小函数，用于通过同样的算法，自动生成各自的样式
- 特点：
- 可带参数
- 调用方法 @include
- 可传一个不带值的参数--变量
- 传一个带值的参数--常量
- 缺点：
不动自动合并相同样式的代码
- 特点：
扩展/继承：@extend
-- 相当于CSS中堆叠样式,在父类样式的基础上再添加或改变样式
占位符：%xxx
-- 不被调用时，不会产生CSS代码，可以节省空间
插值：Interpolation
-- 与JS中join方法很像，主要是拼接功能
- 可以用在调用继承以及调用占位符的时候，拼接选择器，拼接占位符的名，以及可以用于拼接属性 例：margin-top
- 不能用于拼接变量&xx，混合宏的函数名 会报错
问题探讨
混合宏 VS 继承 VS 占位符 （优劣对比）
混合宏： 如果你的代码中涉及到变量，建议使用混合宏来创建相同代码。
继承： 不需要变量时，并且基类(父类)在HTML中被使用时用继承
占位符： 基类(父类)不在HTML被使用时，用占位符。
最新文章
- php 设计模式--准备篇
- 通过URLHttpConnection方式来取得图片，并且显示在ImageView上
- Unity3D的LightProbe动态光探头用法介绍
- android DatePickerDialog配合edittext实现按日期查询
- 简单的LRU Cache设计与实现
- BZOJ 2726: [SDOI2012]任务安排( dp + cdq分治 )
- MySQL锁与MVCC
- servlet入门学习之API
- BZOJ 3456: 城市规划 [多项式求逆元 DP]
- 腾讯短信服务精简版（PHP )
- Ubuntu 16.04 安装opencv3.4.5/cuda/caffe并使用jni笔记
- phpstudy 2016 切换Nginx+php7.0版本所需运行库 vc14 + 安装redis拓展
- steps/align_si.sh
- centos7环境下对防火墙的操作
- spring cloud: 使用consul来替换config server
- 【做题】TCSRM601 Div1 500 WinterAndSnowmen——按位考虑&dp
- 【问题解决：连接异常】 java.lang.ClassCastException: java.math.BigInteger cannot be cast to java.lang.Long
- Tensorflow中的run()函数
- 解决 emoji表情存入数据库为' ??? '
- Flutter隐藏控件方法