发表于： 2020-07-22 18:09:34
1 2200
一，今天完成的事情
复习css任务中的预处理语言
Sass&Less
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
因为 Less 和 CSS 非常像，Less 仅对 CSS 语言增加了少许方便的扩展，学习很容易。
sass，作为”世界上最成熟、最稳定、最强大的专业级CSS扩展语言”。
兼容所有版本的css，且有无数框架使用sass构建，如Compass，Bourbon，和Susy。
使用方法：参考官方文档
相同之处：
Less和Sass在语法上有些共性，比如下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
两者异同：
ESS 和 SCSS 都属于 CSS 预处理器的范畴，也就是 CSS 的超集，但是两者的
语法、如何使用和具体的功能实现还是有差异的。
下面我试着以代码示例的方式给大家演示一下两者的几个常见区别。
声明和使用变量
LESS 采用 @ 符号，SCSS 采用 $ 符号。
在下面的示例中，我们首先在规则外声明了一个名为 link-color 的变量，然后在
名为 #main 的规则内声明一个名为 width 的变量，接着把 width 变量赋值给了 CSS 的 width 属性。
LESS：
@link-color: #428bca;
#main {
@width: 5em;
width: @width;
}
SCSS：
$link-color: #428bca;#main {
$width: 5em;
width: $width;
}
变量插值（Variable Interpolation）
LESS 采用 @{xxxx} 的形式，SCSS 采用 ${xxxx} 的形式。
示例一：使用变量插值作为 CSS 选择器
LESS：
// Variables
@my-selector: banner;
// Usage
.@{my-selector}
{
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
SCSS：
// Variables
$my-selector: banner;// Usage
.#{$my-selector}
{
font-weight: bold;
line-height: 40px;
margin: 0 auto;}
Mixins 的定义、使用及参数
定义一个 Mixin：LESS 使用 dot 符号（也就是句点）来定义一个 Mixin，
并且可以把任意的 CSS 规则作为 Mixin 使用；SCSS 使用 @mixin 指令来定义一个 Mixin。
示例 - 来自 BootStrap 的 alert-variant Mixin 的定义
LESS：
.alert-variant(@background;
@border; @text-color) {
background-color:
@background;
border-color: @border;
color: @text-color;
hr {
border-top-color: darken(@border, 5%);
}
.alert-link {
color: darken(@text-color, 10%);
}
}
SCSS：
@mixin alert-variant($background, $border, $text-color) {
background-color: $background;
border-color: $border;
color: $text-color;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($text-color, 10%);
}}
使用 Mixin：LESS 仍是使用 dot 符号（句点），如果 Mixin 没有参数的话
可以省略后面的圆括号；SCSS 使用 @include 指令来引入一个 Mixin。
示例 - 引入一个名为 center-block 的 Mixin。
LESS：
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.a {
.center-block;
}
SCSS：
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.a {
@include center-block;}
函数的使用
LESS：
@input-border-focus: #66afe9;
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
// iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
.form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus {
border-color: @color;
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
.form-control {
.form-control-focus();
}
SCSS：
$input-border-focus: #66afe9;
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow;
}
@mixin form-control-focus($color: $input-border-focus) {
$color-rgba: rgba(red($color), green($color), blue($color), .6);
&:focus {
border-color: $color;
outline: 0;
@include box-shadow(#{
inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba});
}
}
.form-control {
@include form-control-focus();}
二，明天计划的事情：复习知识点。
返回列表
评论