【CSS基础】Sass预处理器个人学习使用记录
文章目录
- 预处理器
- 安装
- 编译方法
- ndoe端 (命令行)
- 工具（GUI）
- 语法
- 变量
- 可嵌套写法
- &连接写法
- @mixin混合（集合）
- @extend继承
- @import导入
- 运算
- 函数
- #{}变量插入
- @if
- @for
- @each
- @while
- 尾巴
- Less
- 安装
- 编译方法
- node（命令行）
- 工具（GUI）
- 基本语法
预处理器
可理解为预处理器扩展了css语言，包含(变量、运算、函数、Mixin、逻辑判断的语法等等)，强化了css的编写方法，使css更易维护和扩展。
比较主流的预处理器有Ssss和Less，个人认为sass比less稍微多些东西，所以学会使用sass再去使用less会很容易上手。
sass和less的最大区别： sass基于ruby语言写出、less基于js写出。
.sass和.scss的区别： .scss可以理解为新版的sass语法，实质一样，只是书写格式不一样。例如：
.scss/* 注释是闭口的 */@import "base";@mixin mes {color: #FF0000;
}.mes_pass {@include mes;
}ul {li {}
}
.sass// 注释是开口的，而且不用写分号@import base=mes {color: #FF0000
}.mes_pass +mesul color: redli color: blue
现都采用scss的写法。
安装
我用的win10系统，所以先记录win的方法。
网上下载并安装ruby环境。
查看版本，测试ruby是否安装成功：
ruby -v
安装sass：
gem install sass
测试sass是否安装成功：
sass -v
编译方法
ndoe端 (命令行)
先新建.scss文件并写好样式，怎么编译成.css文件，如果scss文件和编译后的css文件希望在同一个文件夹内：
cd 到放.scss文件的目录
sass 名字.scss 名字.css // 编译普通版
sass --style compressed 名字.scss 名字.css // 编译压缩版
如果scss和css分开在不同文件夹：
sass sass文件夹/名字.scss:css文件夹/名字.css
动态监听：
sass --watch 名字.scss:名字.css
sass --watch sass文件夹:css文件夹
输出格式： 就是转成css后的书写风格
- nestd 嵌套
- compact 紧凑
- compressed 压缩，连注释都被压缩没了，百度用这种
- expanded 扩展（正常）
更改输出格式
sass --watch 名字.scss:名字.css --style xxxx
工具（GUI）
koala软件，能够随时监听（就是改一下就能随时更新.css文件），注意文件名不能有中文。
在网上下载软件，安装，运行。直接把放有.scss的文件拖进去。单击里面的.scss文件，右边可以选编译输出的方式。执行编译后文件夹自动生成.css文件。
语法
变量
$变量名: 值$bg: red;
$border: 1px solid $bg;.box{background-color: $bg;border: 1px solid $bg;
}
类型
number：数字
1
1px
1%
1remstring：字符串
hi
“hi”list：列表
1px solid #000;
5px 1px;map：项目为键值对的list类型
$colors:(light: #fff, dark: #000)color：颜色
rgb()
hsl()
red
#000boolean：布尔
可嵌套写法
普通嵌套
.dad {.son {div {}}
}
属性的拆分嵌套
body{font: {family: xxx;size: xxx;weight: xxx;};
}body{border: 1px solid #000 {left: 0;right: 0;};
}
&连接写法
a {&:hover {}
}
有这个符号的原因是因为嵌套写法的原理是底层给嵌套的元素前加上父级名称和空格，这样用伪类的时候会出现这种情况：
a {:hover {}
}编译后：a :hover{} 明显多了空格，报错
@mixin混合（集合）
无参数
@mixin all_red {color: red;a {background-color: red;}
}.box {@include all_red;...
}box类名里就有all_red里的css样式了
有参数
@mixin all_red($tc, $bg) {color: $tc;a {background-color: $bg;color: darken($tc, 10%); // darken是sass自带函数, 表示加深10%颜色}
}.box {@include all_red(red, red);...
}.box1 {@include all_red($bg: red, $tc: red);...
}
@extend继承
继承某个名称下面被赋予的所有样式属性
.dad {margin: 0;
}.dad div {padding: 0;
}.son {/* 继承了dad, dad div的样式 */@extend .dad
}
@import导入
比如a.scss引入了_b.scss和_c.scss，通过@import引入会整体编译成一个css文件，注意被引入文件需要名称前加下划线让sass分辨；
@import "b";
@import "c";
/* 引入不需要写下划线, 同一个目录下直接这样写即可 */
运算
算数
+ - * /width: 300px/2;字符串用加减乘可以让两个字符串相连接
比较
> < and or not ==
相当于js的
> < && || ! ==
函数
内置
数字类型：
abs(xx) 绝对值
round(xx) 四舍五入
ceil(xx) 向上取整
floor(xx) 向下取整
percentage(xx / xxx) 计算结果自带百分位
min(x, x, x) 取最小数
max(x, x, x) 取最大数字符串类型
to-upper-case(xxx) 大写
to-lower-case(xxx) 小写
str-length(xx) 长度
str-index(字符串、 要查的那个) 同js的indexof
str-insert(字符串，要插入啥字符串，插入下标) 插入字符串颜色类型
adjust-hue(设置了颜色的变量名, 137deg) 修改色相
lighten(设置了颜色的变量名, 30%) 增加明度
darken(设置了颜色的变量名, 20%) 降低明度
saturate(设置了颜色的变量名，50%) 增加饱和度
desaturate(设置了颜色的变量名，50%) 降低饱和度
opacify(设置了颜色的变量名，0.3) 设置不透明度
transparentize(设置了颜色的变量名，0.3) 设置透明度列表类型（注意列表下标从1开始）
length(xx) 查看列表有几个项
nth(xx，1) 获取下标的项
index(xx, red) 获取某个项的下标
append(xx, red) 给列表后添加
join(a列表，b列表) 连接两个列表，第三个参数写comma表示连接用逗号分开map类型
length(xx) 查看列表有几个项
map-get(map变量, key) 通过key获取值
map-keys(map变量) 获取所有key
map-values(map变量) 获取所有value
map-has-key(map变量，key) 判断是否有某个key，返回布尔值
map-merge(map变量, (gray: #eee)) 将后者合并入前者
map-remove(map变量, key1, key2) 移除key
自定义
@function 名称(n1, n2) {@return xxx
}
例子：
$colors: (light: #fff, dark: #000);
@function color($key) {@return map-get($colors, $key);
}
body {background-color: color(light);
}
自定义函数还可以抛出一些信息
$colors: (light: #fff, dark: #000);
@function color($key) {@if not map-has-key($colors, $key) {@warn "在$colors里没找到 #{$key} 这个key" // 这种@warn会在命令行里报错@error"在$colors里没找到 #{$key} 这个key" // 这种@error会在编译后的css文件中用注释的方式提醒错误}@return map-get($colors, $key);
}
#{}变量插入
$wow: "box"
/* 注释中也可以插入这个变量，像字符串插入一样#{wow} */.div-#{box} {}编译成.div-box{}
@if
@if 条件 {}@if 条件 {} @else if 条件 {} @else {}
@for
例子
$columns: 4;
@for $i from 1 through $columns { // 变量i为1，循环加1，超过4为止.col-#{$i} {width: 100% / $columns * $i;}
}
编译后
.col-1 {width: 25%;
}
.col-2 {width: 25%;
}
.col-3 {width: 25%;
}
.col-4 {width: 25%;
}把through换成to，循环就变成到3为止
编译后
.col-1 {width: 25%;
}
.col-2 {width: 25%;
}
.col-3 {width: 25%;
}
@each
循环列表
$icons: success error warning;
@each $icon in $icons {.icon-#{$icon} {background-image: url(../../#{icon}.png);}
}编译成.icon-success {background-image: url(../../success.png);
}
.icon-error {background-image: url(../../error .png);
}
.icon-warning{background-image: url(../../warning.png);
}
@while
@while 条件 {}例子：
$i: 6;
@while 条件 {... {}$i: $i - 2;
}
尾巴
这里记录不是全部的使用方式，推荐去官网查看。
Less
这里就稍微提一下less吧。虽然浏览器支持.less文件，但不支持扩展的部分，所以需要编译成.css。
安装
npm install -g less
编译方法
node（命令行）
lessc 名字.less 名字.css // 编译成正常版
lessc -x 名字.less 名字.css // 编译成压缩版
工具（GUI）
同koala
基本语法
变量同sass
运算同sass
自定义函数
定义函数，可默认参数
.flex(@direction:row, @justify:center, @align:center){display: flex;flex-direction: @direction;justify-content: @justify;align-items: @align;
}
使用
@import '../../assets/mixin.less';
.box {.flex(row, space-between);
}
嵌套写法同sass
&写法同sass
【CSS基础】Sass预处理器个人学习使用记录相关推荐
- 使用sass预处理器的优劣
综述:sass使用编程的思维来开发css,代码得到了复用,提高了开发效率,类似的还有less 1.sass的优势? sass预处理器,他依赖于ruby(runtime),在开发前需要先安装开发环境,s ...
- Less/Sass预处理器
Less,Sass预处理器教程 1.0 CSS预处理器的介绍 CSS预处理器 基于CSS的另一种语言 通过工具编译成CSS 添加了很多CSS不具备的特性 能提升CSS文件的组织方式 CSS预处理器到底 ...
- 前端html+css基础知识汇总（个人学习内容总结，希望对你有帮助 内含部分代码）
*小知识点 0.定位和浮动做布局,移动transform做效果 例如;京东盒子上升效果 快捷键:ctrl+f 快速查找 ctrl+g 快速跳转行号 1.text-aline:center可以让什么元素 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- 初识css预处理器：Sass、LESS
这篇文章是初步介绍css预处理的,详细学习请移步官网~ sass中文文档:https://www.sass.hk/docs less中文文档:http://lesscss.cn/ 什么是css预处理器 ...
- 您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
- 再谈 CSS 预处理器
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
- 什么是 CSS 预处理器/后处理器？
CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成 文件,然后开发者就只要使用这种语言进行编码工作.通俗的说,CSS预处理器用一种 ...
- 《C#零基础入门之百识百例》（九十一）预处理器指令 -- 代码示例
C#零基础入门 预处理器指令 -- 代码示例 前言 一,预处理器指令 1.1 概念 1.2 常用预处理指令 1.3 语法规则 二,声明指令 2.1 声明指令概念 2.2 代码示例 三,条件编译指令 3 ...
最新文章
- LeetCode简单题之赎金信
- 一文看懂最近70年的人工智能简史！中国已经领先全球！
- JavaScript获取iframe中form表单中元素的值
- python画车辆轨迹图,在python中绘制轨道轨迹
- x264_param_t参数注解
- c语言固定长度的字符串,【分享】C语言动态长度字符串
- Linux Unbunt 安装显卡驱动 简单方法
- 人生聚散，一切随缘！
- DSOFramer 控件修改成功
- 前端——动态生成表格
- step7设置pcpg_怎么安装STEP7编程软件及PG/PC接口设置
- 至尊宝android.phone,Android至尊宝 索尼爱立信X10i行货评测
- html5图钉效果,PS CS5操控变形图钉功能实现任意变换人物造型
- 融资租赁业务系统整体介绍(一)
- iOS自定义视图：阅读并同意注册协议 【用户协议及隐私政策入口】
- python编程豆瓣自动回复_微信还不会设置自动回复？我用Python 3招教会你
- win10开机自启应用的设置
- AI绘图实战（十一）：将纸质儿童画修改为电子照片/3D Openpose插件使用 | Stable Diffusion成为设计师生产力工具
- 国家商用密码算法介绍
- 关于魔兽争霸3的这个游戏的一些事情