关于 CSS 预处理语言

最新推荐文章于 2023-09-12 09:07:00 发布

Dear_Yuki

最新推荐文章于 2023-09-12 09:07:00 发布

阅读量3.2k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/Dear_Yuki/article/details/94459962

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

什么是css预处理器？css预处理器是用一种专门的语言，进行网页的样式设计，之后在被编译为正常的css文件，以供项目使用。

使用css预处理语言的好处：是css更加简洁、方便修改、可读性强、适应新强并且更易于代码的维护。

css和sass的关系：

sass是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。

sass和scss的关系：

sass和scss其实是一样的css预处理语言，其后缀名是分别为 .sass和.scss两种。

SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。

两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。而scss则和css的规范是一致的。

SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。

<style type="text/scss" lang="scss" scoped></style>

less

http://lesscss.cn/features/#features-overview-feature-variables

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

$ npm install -g less

.wh(@width, @height){
  width: @width;
  height: @height;
}

变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}
//输出：
#header {
  color: #6c94be;
}

混入（Mixins是一种将一组属性从一个规则集包含（“混入”）到另一个规则集的方法。）

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
//我们希望在其他规则集中使用这些属性。我们只需要输入我们想要属性的类的名称，如下所示：
#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

scss

https://sass-lang.com/

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins(混合)、导入等众多功能，并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目，特别是在搭配 Compass 样式库一同使用时。

1.引用父选择符： `&`

a {
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

被编译为：

a {
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

2.嵌套属性 - .funky{ font:{size:30em;} } 被编译为 .funky{ font-size:30em}

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

被编译为：

.funky {
  font: 2px/3px;     // font:2px/3px 代表 字体大小2px 且 line-height:3px
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; }

3.Placeholder Selectors: `%foo`

//如果没有找到%extreme，就不会编译出东西
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
//.notice 或者 #notice 都可以接受
.notice {
  @extend %extreme;
}
 
// 被编译为
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

4.Variables: `$`

$width: 5em;

#main {
  width: $width;
}

SassScript 支持六种主要的数据类型：

数字（例如 1.2、13、10px）
文本字符串，无论是否有引号（例如 "foo"、'bar'、baz）
颜色（例如 blue、#04a3f9、rgba(255, 0, 0, 0.5)）
布尔值（例如 true、false）
空值（例如 null）
值列表，用空格或逗号分隔（例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif）

//CSS 提供了两种类型的字符串：带引号的字符串，例如 "Lucida Grande" 或 'http://sass-lang.com'； //不带引号的字符串，例如 sans-serif 或 bold。
//虽然说可以接受“”或没有引号，但在编译#{}时，就例外，这要注意
 
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");
 
// 被编译为
body.firefox .header:before {
  content: "Hi, Firefox users!"; }
 
如果没有给引号，就error，因为.header 是class，而文本都是string，这就是要注意的

5.运算

p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
//被编译为：
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

颜色运算：一般 {Sass::Script::Functions color functions} 比颜色运算更有用，并且能达到相同的效果。（下文笔记）

6、Interpolation: `#{}`

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
//被编译为
p.foo {
  border-color: blue; }

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
//被编译为
p {font: 12px/30px; }

7. 变量默认值： `!default`

你可以在变量尚未赋值前，通过在值的末尾处添加 !default 标记来为其指定。也就是说，如果该变量已经被赋值，就不会再次赋值，但是，如果还没有被赋值，就会被指定一个值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}
//被编译为：
#main {
  content: "First content";
  new-content: "First time reference"; }

8. `@` 规则和指令

可参考控制指令（control directives）和 mixin 指令（mixin directives）

@import

Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

@import 根据文件名引入。默认情况下，它会寻找 Sass 文件并直接引入，但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：

如果文件的扩展名是 .css。
I如果文件名以 http:// 开头。
如果文件名是 url()。
如果 @import 包含了任何媒体查询（media queries）。

也可以通过一个 @import 引入多个文件。例如：

@import "rounded-corners", "text-shadow";

将引入 rounded-corners 和 text-shadow 两个文件。

片段

如果你有一个 SCSS 或 Sass 文件需要引入，但是你又不希望它被编译为一个 CSS 文件，你就可以在文件名前面加一个下划线，就能避免被编译。tips: _colors.scss 不能与 colors.scss 并存。

嵌套 @import

虽然大部分时间只需在顶层文件使用 @import 就行了，但是，你还可以把他们包含在 CSS 规则和 @media 规则中。

@media 媒体查询

@extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
//被编译为：
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

控制指令

`@if`

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//被编译为：
p {
  color: green; }

`@for`

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//被编译为：
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

`@each`

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//被编译为：
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

`@while`

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
//被编译为：
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

`@mixin`

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
// 被编译为
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

`@include`

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
//被编译为：
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
//被编译为：

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

Dear_Yuki

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
关于 CSS 预处理语言

什么是css预处理器？css预处理器是用一种专门的语言，进行网页的样式设计，之后在被编译为正常的css文件，以供项目使用。使用css预处理语言的好处：是css更加简洁、方便修改、可读性强、适应新强并且更易于代码的维护。css和sass的关系：sass是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不...
复制链接

扫一扫