Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > HTML Tutorial > Tutorial on using css preprocessor sass (multiple images warning)

Tutorial on using css preprocessor sass (multiple images warning)

WBOY
Release： 2016-09-27 14:05:18
Original
1559 people have browsed it

The CSS preprocessor gives CSS dynamic language features, such as variables, functions, operations, inheritance, nesting, etc., which helps to better organize and manage style files and develop projects more efficiently. The css preprocessor can more easily maintain and manage css code, making the entire web page more flexible and changeable. For preprocessors, the widely used ones are less and sass. There is no comparison here. The two are similar. Sass is written in Ruby language, so compiling Sass files requires a Ruby environment. We do not need to know much about the Ruby language to use sass, we only need to install the Ruby environment, while less mainly runs in the node environment, and the functional syntax is similar. This article mainly introduces the use of sass under Ruby.

Ruby download and installation:

1. Log in to http://rubyinstaller.org/

　

2. Click download to go to this page. For 64-bit Windows computers, download the version pointed by the arrow

3. Install directly after completion

After clicking finish, even if the installation is complete, we still need to go to the command line to check whether the installation is successful. Pay attention to the ruby ​​command line and not the command line under cmd.

Enter the command line after opening:

Then install sass under ruby: enter the command gem install sass

Enter sass -v, and the version number will appear, which means the installation is successful.

Okay, the download and installation is complete, and the environment is set up. The syntax and related instructions are introduced below.

Use of sass.

In order to allow more people to truly learn to use sass, I started by creating a new file and demonstrated step by step.

1. I created a folder called sasstest on the desktop, and created a new file with the suffix sass.scss in it. (After creating a new text document, change the name suffix to sass.scss)

Let me explain here, why is the suffix of sass scss? In fact, sass has two grammatical forms.

The first is scss, which is our suffix form of syntax. This format extends CSS3 syntax, meaning that each CSS stylesheet is an equivalent SCSS file. In addition, SCSS also supports most CSS hacks and browser-specific prefix syntax. The style sheet file of this syntax needs to have the extension name .scss.

The other, and earliest syntax, is called indented syntax. It provides a more concise way to write CSS. It uses indentation instead of curly braces to indicate nested selectors, and newlines instead of semicolons to separate attributes, which some consider to be easier to read and faster to write than SCSS. Indentation syntax has all the features of Sass, although there are some slight syntax differences. Style sheet files using this syntax need to have .sass as the extension.

In fact, no matter which syntax is used, a file of any syntax can be directly imported into a file of another syntax for use. At the same time, it can also be converted to each other through the sass-convert command line tool.

I feel like there is no need to worry about these differences, just use one. I am used to the first one, so this article has always used the scss syntax.

2. The second step is of course to open sass.scss. You can use any editor. This article uses sublime text.

If you want to run sass, you need to use instructions. Well, forget about the syntax for now. Type a few lines in sass.scss to see if it can be compiled into css and understand the instructions in advance.

After typing it, check the newly created folder, you will find that there is nothing, it is still the same

Of course, if you haven’t monitored and run your sass code, how can there be any changes? Remember ruby’s command line window? Yes, you need to type the run command there so that sass can generate css code.

Run the sass file: sass input.scss output.css (the left represents the sass input file, the right is the css output file)

The instructions for sass to monitor sass files are:

The so-called monitoring means that whenever the sass file changes, the css file is generated accordingly. This is different from running, which is one-time and monitoring is continuous.

Monitor a certain sass file: sass --watch input.scss:output.css (the left side represents the sass input file, the right side is the css output file)

Watch the entire folder: sass --watch sass:css (the left side represents the monitored folder path, the right side represents the output folder path)

Then, run our scss code and take a look at the generated css. What I want is to generate a css folder under the sasstest folder to store css files for easy management.

1) Find the current folder. Since it is a desktop, the path is as follows

Note, if you cross a plate, enter a certain plate directly like this:

Follow the above three types and write the corresponding instructions.

2) Run: When running, the css folder cannot be generated. In this case, you need to manually add the css folder.

Command for this example:

Instructions: First enter the sasstest folder, and then type the command.

Result picture:

The first one is the generated cache file. Open it as css and you will see,

In addition to css, there is also a map file. The sass file is equivalent to the source file, and the css is equivalent to the compiled file. When you check for page problems, you see the css, but what needs to be modified is the sass file. This map It is the correspondence table between the two files.

Open 2 files separately:

You can see that the css has come out, and that file is just a correspondence table, so don’t worry about it.

3) Monitor files. We restore the folder to its initial state, as shown in the picture:

Monitor the sass.scss file sass --watch sass.scss:csssass.css. The monitoring will generate the corresponding folder, no need to create it manually. (Note that only one file can be monitored in this way, which is sass.scss. If there are other sass files under sasstest, they cannot be monitored)

The effect is the same:

We have restored the initial state of the folder, deleted the generated one, and tried the command to monitor the folder. In fact, the most practical one is to monitor the folder

To monitor a folder, the path needs to go back to the previous level of the folder, which in this article is the desktop.

Okay, that’s all about the operation.

Regarding CSS output formats, Sass provides four types: nested, expanded, compact, and compressed.

Instruction writing:

nested: The nested (nested) format is the default output format of Sass because its format reflects CSS styles and HTML document structure. Each attribute occupies its own line, but the indentation is not fixed. Each rule is indented based on its nesting depth.

expanded: The expanded (expanded) format is more like a handwritten CSS style, with each attribute and rule occupying its own line. Properties within rules are indented, but rules do not have any special indentation.

compact: compact format takes up less space than nested or expanded format. This format focuses on selectors, not their properties. Each CSS rule has its own line, which also includes each property defined. Nested rules start on a new line, and non-nested selectors will output a blank line as a separator.

compressed: The compressed (compressed) format takes up as little space as possible. There will be a newline at the end of the file, and there are basically no extra spaces except the necessary delimiter selectors. It also includes some other small compressions, such as Choose the representation with the smallest color. This means readability is poor.

sass syntax:

Time is limited, I will post the grammar code I used in practice: 

<span style="color: #800000;">@charset "utf-8";
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
* CSS扩展
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">嵌套规则</span><span style="color: #008000;">*/</span><span style="color: #800000;">
#main</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    p, div{
        font-size</span>:<span style="color: #0000ff;">2em</span>;<span style="color: #ff0000;">
        a{
            font-weight</span>:<span style="color: #0000ff;"> bold</span>;
        }<span style="color: #800000;">
    }
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">引用父选择器</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a</span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> lighter</span>;<span style="color: #ff0000;">
    &</span>:<span style="color: #0000ff;">hover{
        text-decoration:underline</span>;<span style="color: #ff0000;">
        font-weight</span>:<span style="color: #0000ff;"> bolder</span>;
    }<span style="color: #800000;">
    body.firefox &</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;">red</span>;
    }<span style="color: #800000;">
}
#main</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">
    a{
        font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
        &</span>:<span style="color: #0000ff;">hover{
            color:blue</span>;
        }<span style="color: #800000;">
    }
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">嵌套属性</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fun</span>{<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;">{
        family:"微软雅黑"</span>;<span style="color: #ff0000;">
        size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
        weight</span>:<span style="color: #0000ff;">bolder</span>;
    }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 占位符选择器: %foo 
Sass 支持一种特殊类型的选择器,叫做"占位符选择器" 
](placeholder selector)。这些看起来像 class 和 id 
选择器，除了# 或.用%替换。他们需要在@extend 指令中使用;
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
*  Sassscript
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;"> 交互式 shell </span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
Interactive Shell 可以在命令行中测试 SassScript 的功能。
在命令行中输入 sass -i，然后输入想要测试的 SassScript 
查看输出结果：
sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
 变量：变量仅在它定义的选择器嵌套层级的范围内可用
 （愚人码头注：可以理解为块级作用域）。不在任何嵌
 套选择器内定义的变量则在可任何地方使用（愚人码头
 注：可以理解为全局变量）。定义变量的时候可以后面
 带上!global标志，在这种情况下，变量在任何地方可
 见（愚人码头注：可以理解为全局变量）
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
 #bod</span>{<span style="color: #ff0000;">
     $width</span>:<span style="color: #0000ff;">100px !global</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;">$width</span>;
 }<span style="color: #800000;">
 #ref</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">$width</span>;
 }
<span style="color: #008000;">/*</span><span style="color: #008000;">
数据类型：SassScript 支持 7 种主要的数据类型
数字、文本字符串、颜色、布尔值、空值、值列表 (list)、maps
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin firefox-message($select)</span>{<span style="color: #ff0000;">
    body #{$select</span>}<span style="color: #800000;">:before</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">
        content</span>:<span style="color: #0000ff;"> "hi"</span>;
    }<span style="color: #800000;">
}
@include firefox-message(".header");
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 插值 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
$name : son;
$color :blue;
p.#</span>{<span style="color: #ff0000;">$name</span>}{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#{color</span>}<span style="color: #800000;">;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> SassScript中的& 
就像当它在选择器中使用一样，SassScript中的&指向
当前父选择器。下面是一个逗号分隔的列表（list）
中包含一个空格的分隔列表（list）
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin does-parent-exist </span>{<span style="color: #ff0000;">
  @if & {
    &</span>:<span style="color: #0000ff;">hover {
      color: red</span>;
    }<span style="color: #800000;">
  } @else </span>{<span style="color: #ff0000;">
    a {
      color</span>:<span style="color: #0000ff;"> red</span>;
    }<span style="color: #800000;">
  }
}
@include does-parent-exist;
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 变量默认: !default 
 如果分配给变量的值后面添加了!default标志 ，
 这意味着该变量如果已经赋值，那么它不会被重
 新赋值，但是，如果它尚未赋值，那么它会被赋
 予新的给定值。
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
$content: "Second content?" !default;
$content: "First content";
$new_content: "First time reference" !default;

#main </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> $content</span>;<span style="color: #ff0000;">
  new-content</span>:<span style="color: #0000ff;"> $new_content</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> @media </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.silder</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
    @media screen  and (max-width</span>:<span style="color: #0000ff;"> 500px) {
        width:500px</span>;
    }<span style="color: #800000;">
}
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #</span>{<span style="color: #ff0000;">$media</span>}<span style="color: #800000;"> and ($feature: $value) </span>{<span style="color: #ff0000;">
  .sidebar {
    width</span>:<span style="color: #0000ff;"> 500px</span>;
  }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> @extend </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.error</span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px #f00</span>;<span style="color: #ff0000;">
      background-color</span>:<span style="color: #0000ff;"> #fdd</span>;
}<span style="color: #800000;">
.seriousError</span>{<span style="color: #ff0000;">
    @extend .error;
    border-width</span>:<span style="color: #0000ff;"> 3px</span>;
}<span style="color: #800000;">
#fake-links .link </span>{<span style="color: #ff0000;">
    @extend a.class;
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;
}<span style="color: #800000;">
a.class</span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">blue</span>;<span style="color: #ff0000;">
    &</span>:<span style="color: #0000ff;">hover{
        color:red</span>;
    }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
@extend-Only 选择器
占位选择器看起来很像普通的 class 和 id 选择器，
只是 # 或 . 被替换成了 %。他可以像 class 或者
 id 选择器那样使用，而它本身的规则，不会被编译
 到 CSS 文件中，如下
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
#context a%extreme </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 2em</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
占位符选择器，就像class和id选择器那样可以用于扩展。
扩展选择器，将会编译成CSS，占位符选择器本身不会被
编译。例如：
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.notice </span>{<span style="color: #ff0000;">
  @extend %extreme;
</span>}
<span style="color: #008000;">/*</span><span style="color: #008000;">
!optional 标记:主要是避免扩展时如果没有某个选择器，会报错
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a.important </span>{<span style="color: #ff0000;">
  @extend .noticeqq !optional;
</span>}
<span style="color: #008000;">/*</span><span style="color: #008000;">
*
*控制指令和表达式
*
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">@if 语法</span><span style="color: #008000;">*/</span><span style="color: #800000;">
$type : monster;
p</span>{<span style="color: #ff0000;">
    @if $type == ocean {
        color</span>:<span style="color: #0000ff;"> red</span>;
    }<span style="color: #800000;"> @else if $type == matator</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;"> blue</span>;
    }<span style="color: #800000;"> @else if $type == monster</span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;"> green</span>;
    }<span style="color: #800000;"> @else </span>{<span style="color: #ff0000;">
        color</span>:<span style="color: #0000ff;"> black</span>;
    }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">@for 语法</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
@for指令重复输出一组样式。对于每次重复，计数器变量用于
调整输出结果。该指令有两种形式：@for $var from <start> 
through <end> 和 @for $var from <start> to <end>。注意
关键字through 和 to的区别。$var可以是任何变量名，比如$i;
<start> 和 <end>是应该返回整数的SassScript表达式。当
<start>比<end>大的时候，计数器将递减，而不是增量。

@for语句将设置$var为指定的范围内每个连续的数值，并且每
一次输出的嵌套样式中使用$var的值。对于from ... through
的形式，范围包括<start>和<end>的值，但from ... to的形式
从<start>开始运行，但不包括<end>的值。
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@for $i from 1 through 3 </span>{<span style="color: #ff0000;">
      .item-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em * $i</span>; }<span style="color: #800000;">
}
@for $i from 5 to 3 </span>{<span style="color: #ff0000;">
      .item-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em * $i</span>; }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">@each
@each指令通常格式是@each $var in <list or map>。$var可以
是任何变量名，像$length 或者 $name，和<list or map>是一
个返回列表（list）或 map 的 SassScript 表达式。

@each 规则将$var设置为列表（list）或 map 中的每个项目，
输出样式中包含使用$var的值
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@each $animal in puma, sea-slug, egret, salamander </span>{<span style="color: #ff0000;">
      .#{$animal</span>}<span style="color: #800000;">-icon </span>{<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> url('/images/#{$animal</span>}<span style="color: #800000;">.png');
  }
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">多重赋值</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) </span>{<span style="color: #ff0000;">
      .#{$animal</span>}<span style="color: #800000;">-icon </span>{<span style="color: #ff0000;">
        background-image</span>:<span style="color: #0000ff;"> url('/images/#{$animal</span>}<span style="color: #800000;">.png');
        border: 2px solid $color;
        cursor: $cursor;
  }
}
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) </span>{<span style="color: #ff0000;">
  #{$header</span>} {<span style="color: #ff0000;">
        font-size</span>:<span style="color: #0000ff;"> $size</span>;
  }<span style="color: #800000;">
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
@while 指令重复输出嵌套样式，直到SassScript表达式返回结果
为false。这可用于实现比@for语句更复杂的循环
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
$i: 6;
  @while $i > 0 </span>{<span style="color: #ff0000;">
  .item-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2em * $i</span>; }<span style="color: #800000;">
      $i: $i - 2;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">
*
*混入指令
*
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
混入(mixin)允许定义可以在整个样式表中重复使用的样式，
而避免了使用无语意的类（class），比如 .float-left。
混入(mixin)还可以包含所有的CSS规则，以及任何其他在Sass
文档中被允许使用的东西。他们甚至可以带arguments，引入变
量，只需少量的混入(mixin)代码就能输出多样化的样式。
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">1、定义一个混入(mixin):@mixin</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin large-text </span>{<span style="color: #ff0000;">
  font</span>:<span style="color: #0000ff;"> {
    family: Arial</span>;<span style="color: #ff0000;">
    size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    weight</span>:<span style="color: #0000ff;"> bold</span>;
  }<span style="color: #800000;">
  color: #ff0000;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">2、引入混合样式：@include</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.page-title </span>{<span style="color: #ff0000;">
  @include large-text;
  padding</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">
混入（mixin）也可以包含在任何规则的外（即，在文档的根）,
只要它们不直接定义的任何属性或使用任何父选择器引用
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin silly-links </span>{<span style="color: #ff0000;">
  a {
    color</span>:<span style="color: #0000ff;"> blue</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;
  }<span style="color: #800000;">
}
@include silly-links;
</span><span style="color: #008000;">/*</span><span style="color: #008000;">带参数</span><span style="color: #008000;">*/</span><span style="color: #800000;">
@mixin sexy-border($color, $width: 1in) </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> {
    color: $color</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> $width</span>;<span style="color: #ff0000;">
    style</span>:<span style="color: #0000ff;"> dashed</span>;
  }<span style="color: #800000;">
}
p </span>{<span style="color: #ff0000;"> @include sexy-border(blue); </span>}<span style="color: #800000;">
h1 </span>{<span style="color: #ff0000;"> @include sexy-border(blue, 2in); </span>}
Copy after login

The following is an example of button style production: 

<span style="color: #800000;">.button-narmol</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #FFFFFF</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">
    -webkit-tap-highlight-color</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, 0)</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;">pointer</span>;<span style="color: #ff0000;">
    &</span>:<span style="color: #0000ff;">after{
        content: " "</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> 200%</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 200%</span>;<span style="color: #ff0000;">
        position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
        top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 1px solid rgba(0, 0, 0, 0.2)</span>;<span style="color: #ff0000;">
        -webkit-transform</span>:<span style="color: #0000ff;"> scale(0.5)</span>;<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> scale(0.5)</span>;<span style="color: #ff0000;">
        -webkit-transform-origin</span>:<span style="color: #0000ff;"> 0 0</span>;<span style="color: #ff0000;">
        transform-origin</span>:<span style="color: #0000ff;"> 0 0</span>;<span style="color: #ff0000;">
        box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
        border-radius</span>:<span style="color: #0000ff;"> 10px</span>;
    }<span style="color: #800000;">
}
@mixin button-style-block($select,$color,$darken)</span>{<span style="color: #ff0000;">
    #{$select</span>}{<span style="color: #ff0000;">
        display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
        padding-left</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
        padding-right</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
        font-size</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;">
        line-height</span>:<span style="color: #0000ff;"> 2.55555556</span>;<span style="color: #ff0000;">
        background-color</span>:<span style="color: #0000ff;"> darken($color,$darken)</span>;<span style="color: #ff0000;">
        @extend .button-narmol;
        &</span>:<span style="color: #0000ff;">active{
            background-color: darken($color,$darken+10%)</span>;
        }<span style="color: #800000;">
    }
}
@mixin button-style-inline-block($select,$color,$darken)</span>{<span style="color: #ff0000;">
    #{$select</span>}{<span style="color: #ff0000;">
        background-color</span>:<span style="color: #0000ff;"> darken($color,$darken)</span>;<span style="color: #ff0000;">
        display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
        padding</span>:<span style="color: #0000ff;"> 0 1.32em</span>;<span style="color: #ff0000;">
        line-height</span>:<span style="color: #0000ff;"> 2.3</span>;<span style="color: #ff0000;">
        font-size</span>:<span style="color: #0000ff;"> 13px</span>;<span style="color: #ff0000;">
        @extend .button-narmol;
        &</span>:<span style="color: #0000ff;">active{
            background-color: darken($color,$darken+10%)</span>;
        }<span style="color: #800000;">
    }
}
@include button-style-block(".krui-btn_primary",#1AAD19,10%);
@include button-style-block(".krui-btn_error",#E64340,0%);
@include button-style-inline-block(".krui-btn_primary-small",#1AAD19,0%);</span>
Copy after login

Just call it in html. 

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>button<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="css/button.css"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        span</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary-small"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_error"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="krui-btn_primary"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> 
Copy after login

I secretly spent a lot of time writing this article during work. I hope it will be useful to everyone. In addition, please respect the originality and indicate the source when reprinting. -------Blog Garden. I am a water fish《》

Sass Chinese documentation: http://www.css88.com/doc/sass/

Related labels：
css预处理器sass使用教程(多图预警)
source：php.cn
Previous article：css text-fill-color与text-stroke讲解 Next article：Let’s talk about some interesting CSS topics (5)--center a single line, center two lines, and omit more than two lines.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2433
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2564
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2169
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
2047
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
2148
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template