Home > Web Front-end > JS Tutorial > body text

First use of SASS

php中世界最好的语言
Release: 2018-03-19 13:52:38
Original
1649 people have browsed it

This time I will bring you the first use of SASS. What are the precautions when using SASS for the first time. The following is a practical case, let’s take a look.

First experience with SASS

Tags (separated by spaces): sass scss css


1. Compilation environment
Requires Ruby to be installed, After that, you need to open Start Command Prompt with Ruby to run

gem install sass
Copy after login

2. Command line compilation

sass /style.scss:/style.css
Copy after login

Multiple file compilation (must use - -watch? Anyway, I will report an error if I don’t add watch)

sass --watch sass/:css/
Copy after login

Enable watch

sass --watch /style.scss:/style.css
Copy after login

Output method--style [nested (the last curly bracket does not wrap)|expanded (fully expanded)|compact(single line)|compressed(compressed)]

sass --watch sass/:css/ --style compressed
Copy after login

3. Basic syntax

(1). Nesting

is almost the same as less.

nav {
    color: blue;
    li {
        color: yellow;
        a {
            color: red;
            header & {
                color: green;
            }
        }
    }
}
Copy after login

After compilation

nav {
  color: blue;
}
nav li {
  color: yellow;
}
nav li a {
  color: red;
}
header nav li a {
  color: green;
}
Copy after login
  • Attributes are nested (same attribute prefix), and attributes can be added after the prefix colon

.box {
    font: 12px/24px {
        size: 12px;
        weight: bold;
    }
}
Copy after login

After compilation

.box { font: 12px/24px; font-size: 12px; font-weight: bold; }
Copy after login
  • Pseudo class nesting, the same as less

.clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
        overflow: hidden;
    }
}
Copy after login

After compilation

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}
Copy after login
  • Parent selector& can be used as the first character of the selector, such as

.btn {
    padding: 4px 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    color: #333;
    &-primary {
        border-color: #ff5f00;
        background: #ff5f00;
        color: #fff;
    }
}
Copy after login

after compilation

.btn, .btn-primary { padding: 4px 12px; font-size: 16px; border: 1px solid #ddd; color: #333; }
.btn-primary { border-color: #ff5f00; background: #ff5f00; color: #fff; }
Copy after login

(2). The comment

/**/ will appear in the compiled file amazing!
// will not

// 方向
/*方向*/
$d: "right";
.box {
    @extend %border-#{$d};
}
/*位置*/
Copy after login

After compilation

.box {
  border-right: 2px solid #ddd;
}
/*方向*/
/*位置*/
Copy after login

(3). Variable

##$[Variable name]: [Value] Block-level scope

!globalDeclaration can convert local variables into global variablesDefault variables; ordinary variables will overwrite default variables

$size: 16px;
$size: 14px !default;
p.p-1 {
    font-size: $size;
}
Copy after login
After compilation

p.p-1 {font-size:16px}

(4). Operation

+, -, *, /, %
, = can also be used for numerical operations==, != can be used for all data types Operations cannot be performed on different units
String concatenation can be performed; and whether or not there are quotation marks is determined by the left side
Division needs to be in a mathematical expression, and two common attributes need to be enclosed in parentheses, such as

.box {
    width: (100px / 2);
}
Copy after login
After compilation

.box {
  width: 50px;
}
Copy after login
  • The variables wrapped in the interpolation statement do not perform division operations

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}
Copy after login
After compilation

p { font: 12px/30px; }
Copy after login
  • Color calculation segmentation (according to red, green and blue)

    Color function
    Among them,
    fade-in($color, $amount) and other methods, the color parameter can only be rgba()Color, different from less

First use of SASS

##(5). Mix

    Used to define reusable styles. Note that the syntax does not include dots, and the default parameter values ​​are the same as less.
  • @mixin [mixin-name]([$param1, $param2: default-value ]) { ... }
    Use: @include [mixin-name](value1, value2);

  • For indefinite parameters, Use
  • ...

    , such as

    @mixin box-shadow($shadows...) { 
        -moz-box-shadow: $shadows; 
        -webkit-box-shadow: $shadows; 
        box-shadow: $shadows; 
    }
    Copy after login
(6). Inherit

  • @extend .[class]

  • You can also inherit any selector defined for a single element, such as
  • @extend a:hover;

    .btn {
        border: 1px solid #999;
        padding: 4px 12px;
        font-size: 14px;
        background: #ddd;
        color: #333;
    }
    .btn-primary {
        background: #ff5f00;
        color: #fff;
        @extend .btn;
    }
    Copy after login
  • After compilation
.btn, .btn-primary {
  border: 1px solid #999;
  padding: 4px 12px;
  font-size: 14px;
  background: #ddd;
  color: #333;
}
.btn-primary {
  background: #ff5f00;
  color: #fff;
}
Copy after login

Placeholder

%

Code declared with placeholders is not @extend
The call will not be compiled The same style will be combined through ,
to reduce the amount of code <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">%box-padding {     padding: 4px 12px; } .box {     font-size: 14px;     @extend %box-padding; } .box-2 {     font-size: 18px;     @extend %box-padding; }</pre><div class="contentsignin">Copy after login</div></div>After compilation

.box, .box-2 {
  padding: 4px 12px;
}
.box {
  font-size: 14px;
}
.box-2 {
  font-size: 18px;
}
Copy after login

(7) . Interpolation

Variables can be used in selectors or attribute names through the

#{}

interpolation statement#{$[param]}
Usage , can be used in @each, @extend, multi-line comments <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$border-properties: (border); @mixin set-border($direction, $val) {     @each $prop in $border-properties {         #{$prop}-#{$direction}: $val;     } } .box {     @include set-border(left, 1px solid #ddd); }</pre><div class="contentsignin">Copy after login</div></div>After compilation

.box {
  border-left: 1px solid #ddd;
}
Copy after login
%border-right {
    border-right: 2px solid #ddd;
}
$d: &quot;right&quot;;
.box {
    @extend %border-#{$d};
}
Copy after login

After compilation

.box {
  border-right: 2px solid #ddd;
}
Copy after login

(8). 导入

  • @import可以导入多个文件,比如@import "rounded-corners", "text-shadow";

  • 导入文件可以通过url()的方式使用插值语句#{},比如@import url("http://fonts.googleapis.com/css?family=\#{$family}");

  • 如果想使一个sass文件只作为导入文件,不进行编译,在文件名前加_即可,比如文件命名为_colors.scss,使用@import "colors";导入,注意文件夹下不能再有colors.scss文件。

  • 可以用在嵌套中,作用域就只在当前嵌套中了,很赞;但是不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

(9). 媒体查询 @media

  • 用法同css

  • 可以写在嵌套中,编译后将会编译在最外层,且里面的选择器会是嵌套时候的选择器
    比如

.sidebar {
    width: 300px;
    @media screen and (orientation: landscape) {
        width: 500px;
    }
}
Copy after login
.sidebar { width: 300px; }
@media screen and (orientation: landscape) { .sidebar { width: 500px; } }
Copy after login
  • media的查询条件可以使用插值语句

  • media的查询条件可以嵌套

(10). @at-root

  • 将嵌套的选择器提升到当前文档最顶层, 比如

.parent {
    font-size: 14px;
    @at-root .child-a {
        font-size: 16px;
        @at-root .child-c {
            font-size: 18px;
        }
    }
    .child-b {
        font-size: 12px;
    }
}
Copy after login
.parent { font-size: 14px; }
.child-a { font-size: 16px; }
.child-c { font-size: 18px; }
.parent .child-b { font-size: 12px; }
Copy after login
  • @at-root (without: [directive1 directive2 ...])可以排除前面的指令

  • 括号后面不能有选择器,没有括号必须有选择器

@media .print {
    .page {
        width: 8in;
        @at-root (without: media) {
            color: red;
        }
    }
}
// 没有without
@media print {
    .page {
        width: 8in;
        @at-root .p {
            color: red;
        }
    }
}
Copy after login
@media .print { .page { width: 8in; } }
.page { color: red; }
@media print { .page { width: 8in; }
  .p { color: red; } }
Copy after login

(11). 控制指令

  • 主要与混合指令 (mixin) 配合使用,
    这是less中所没有的,less通过其它方式可以实现类似的效果,比如循环,less可以通过递归配合when关键字来实现:.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); }

  • @if 表达式返回值不是 false 或者 null 时,执行 {} 内的样式,同样还有@else if@else

  • @for 语法:@for $var from <start> through <end></end></start> 或者 @for $var from <start> to <end></end></start>
    <start></start><end></end> 必须为整数
    through 包含 <start></start><end></end> 的值,而 to 只包含 <start></start>

  • @each 语法: $var in <list></list>
    <list></list> 值为列表
    比如

$arr: a, b, c, d, e;
@each $img in $arr {
    .box-#{$img} {
        background: url('/img/#{$img}.png') no-repeat;
    }
}
Copy after login
.box-a { background: url(&quot;/img/a.png&quot;) no-repeat; }
.box-b { background: url(&quot;/img/b.png&quot;) no-repeat; }
.box-c { background: url(&quot;/img/c.png&quot;) no-repeat; }
.box-d { background: url(&quot;/img/d.png&quot;) no-repeat; }
.box-e { background: url(&quot;/img/e.png&quot;) no-repeat; }
Copy after login
$list: (aa, pen), (bb, apple), (cc, bag);
@each $var, $img in $list {
    .box-#{$var} {
        background: url('/img/#{$img}.png') no-repeat;
    }
}
Copy after login
.box-aa { background: url(&quot;/img/pen.png&quot;) no-repeat; }
.box-bb { background: url(&quot;/img/apple.png&quot;) no-repeat; }
.box-cc { background: url(&quot;/img/bag.png&quot;) no-repeat; }
Copy after login

使用map数组或许更为明了:

$list-2: (aaa: yellow, bbb: blue, ccc: red);
@each $key, $color in $list-2 {
    .box-#{$key} {
        background: #{$color};
    }
}
Copy after login
.box-aaa { background: yellow; }
.box-bbb { background: blue; }
.box-ccc { background: red; }
Copy after login
  • @while 循环,语法:@while [conditions] { ... }

(12). 其它

  • @debug 可以输出信息到编译器

  • @warn 将SassScript表达式的值打印到标准错误输出流。

  • @error 抛出SassScript表达式的值作为致命错误

  • @function 自定义函数

@function [function-name]([params]) {
    @return [value];
}
Copy after login

The end...    Last updated by: Jehorn, Mar 13, 2018, 12:10 PM

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Basic knowledge of html in the front-end

Css float box model position

The above is the detailed content of First use of SASS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!