css预处理器scss/sass语法以及使用

scss#

scss在css基础语法上面增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，使用scss可以很方便的提高开发效率
scss语法以.scss文件后缀结尾，其中语法格式有两种sass,scss,两种语法在书写风格有差异，如下代码所示

scss#

?
1
2
3
4
5
6
7
.container {
    width: 100px;
    height: 100%;
    .nav {
        width: 100px;
    }
}

sass#

?
1
2
3
4
5
.container
    width: 100px;
    height: 100%;
    .nav
        width: 100px;　

语法#

嵌套规则#

scss允许将一套css样式嵌入另一套样式中，外层的容器将作为内层容器的父选择器，如下代码

 

复制代码
.container {
    width: 500px;
    height: 100px;
    header {
        width: 100%;
        height: 20%;
    }
    main {
        width: 100%;
        height: 20%;
    }
    footer {
        width: 100%;
        height: 20%;
    }
}
复制代码

编译后

复制代码
.container {
    width: 500px;
    height: 100px;
}
.container header {
    width: 100%;
    height: 20%;
}
.container main {
    width: 100%;
    height: 20%;
}
.container footer {
    width: 100%;
    height: 20%;
}
复制代码

父选择器#

有时需要在内层样式内选择外层的父元素，那么就可以使用&符号，如下代码所示

复制代码
.container {
    width: 500px;
    height: 100px;
    &_header {
        width: 100%;
        height: 20%;
        &:hover {
            color: red($color: #000000);
        }
    }
    &_main {
        width: 100%;
        height: 20%;
        &:disabled {
            color: red;
        }
    }
    &_footer {
        width: 100%;
        height: 20%;
        &::after {
            position: absolute;
            content: '';
        }
    }
}
复制代码

编译后

复制代码
.container {
    width: 500px;
    height: 100px;
}
.container_header {
    width: 100%;
    height: 20%;
}
.container_header:hover {
    color: 0;
}
.container_main {
    width: 100%;
    height: 20%;
}
.container_main:disabled {
    color: red;
}
.container_footer {
    width: 100%;
    height: 20%;
}
.container_footer::after {
    position: absolute;
    content: '';
}
复制代码

属性简写#

复制代码
.container {
    width: 500px;
    height: 100px;
    font: {
        family: fantasy;
        size: 30em;
        weight: bold;
    }
    background: {
        image: url('xxx');
        size: 100%;
    }
}
复制代码

编译后

复制代码
.container {
    width: 500px;
    height: 100px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold;
    background-image: url('xxx');
    background-size: 100%;
}
复制代码

变量 (常用)#

scss中使用$符号定义变量

  • 全局变量

 在scss文件顶部定义的变量，为全局变量

复制代码
$font-color: red;
$font-size: 18px;
$font-size-base: $font-size;

.text {
    color: $font-color;
    font-size: $font-size;
}

span {
    font-size: $font-size-base;
}
复制代码

编译后

.text {
    color: red;
    font-size: 18px;
}

span {
    font-size: 18px;
}
  • 局部变量

在属性内定义的变量为块级变量

复制代码
.text {
    $font-color: red;
    $font-size: 18px;
    $font-size-base: $font-size;
    h1 {
        color: $font-color;
        font-size: $font-size;
        span {
            color: $font-color;
            font-size: $font-size;
        }
    }
}
复制代码

编译后

.text h1 {
    color: red;
    font-size: 18px;
}
.text h1 span {
    color: red;
    font-size: 18px;
}

运算 (常用)#

scss中支持+ - * /运算

复制代码
$base-width: 10;
$small-width: 30;
$large-width: $base-width + $small-width;

.div {
    width: $large-width + px;
}

.div1 {
    width: $small-width - $base-width + px;
}

.div2 {
    width: $small-width * $base-width + px;
}

.div2 {
    width: calc($small-width / $base-width) + px;
}
复制代码

编译后

复制代码
.div {
    width: 40px;
}

.div1 {
    width: 20px;
}

.div2 {
    width: 300px;
}

.div2 {
    width: 3px;
}
复制代码

@extend#

scss允许使用@extend集成其他样式规则

复制代码
.item {
    width: 100%;
    height: 20%;
    background-color: red;
}

.item-1 {
    @extend .item;
    border: 1px solid blue;
}

.item-2 {
    @extend .item;
    border: 2px solid blue;
}
复制代码

编译后

复制代码
.item,
.item-2,
.item-1 {
    width: 100%;
    height: 20%;
    background-color: red;
}

.item-1 {
    border: 1px solid blue;
}

.item-2 {
    border: 2px solid blue;
}
复制代码

@if#

当条件满足时，输入对应的样式

复制代码
p {
    @if 1 + 1 == 2 {
        border: 1px solid;
    }
    @if 5 < 3 {
        border: 2px dotted;
    }
    @if null {
        border: 3px double;
    }
}

$type: monster;
p {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}
复制代码

编译后

p {
    border: 1px solid;
}

p {
    color: green;
}

@for#

  • 语法一：@for $var from <start> through <end>

      从start开始，包含end

@for $i from 1 through 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}

编译后

复制代码
.item-1 {
    width: 2em;
}

.item-2 {
    width: 4em;
}

.item-3 {
    width: 6em;
}
复制代码
  • 语法二：@for $var from <start> to <end>

     从start开始，不包含end

@for $i from 1 to 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}

编译后

.item-1 {
    width: 2em;
}

.item-2 {
    width: 4em;
}

@each#

复制代码
// 与if配合使用
$items: large, small, mini, base;

@each $type in $items {
    .button-#{$type} {
        @if $type == large {
            font-size: 30px;
        } @else if $type == small {
            font-size: 20px;
        } @else if $type == mini {
            font-size: 10px;
        } @else if $type == base {
            font-size: 12px;
        } @else {
            font-size: 1em;
        }
    }
}

// 值列表
$items1: (large, 30px), (small, 20px), (mini, 16px), (base, 12px);
@each $type, $size in $items1 {
    .button-#{$type} {
        font-size: #{$size};
    }
}

// 多个变量
$list: (puma, black, default), (sea-slug, blue, pointer), (egret, white, move);
@each $animal, $color, $cursor in $list {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
        border: 2px solid $color;
        cursor: $cursor;
    }
}
复制代码

编译后

复制代码
.button-large {
    font-size: 30px;
}

.button-small {
    font-size: 20px;
}

.button-mini {
    font-size: 10px;
}

.button-base {
    font-size: 12px;
}

.button-large {
    font-size: 30px;
}

.button-small {
    font-size: 20px;
}

.button-mini {
    font-size: 16px;
}

.button-base {
    font-size: 12px;
}

.puma-icon {
    background-image: url('/images/puma.png');
    border: 2px solid black;
    cursor: default;
}

.sea-slug-icon {
    background-image: url('/images/sea-slug.png');
    border: 2px solid blue;
    cursor: pointer;
}

.egret-icon {
    background-image: url('/images/egret.png');
    border: 2px solid white;
    cursor: move;
}
复制代码

@mixin 和 @include#

混合，通过@mixin关键字定义混合样式，通过@include关键字使用混合样式

复制代码
@mixin flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.container {
    @include flex;
    &_list {
        @include flex;
    }
}

.container1 {
    @include flex;
}
复制代码

编译后

复制代码
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}
.container_list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.container1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}
复制代码

@mixin也可以使用@include混合其他样式

复制代码
@mixin flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

@mixin center {
    @include flex;
    text-align: center;
}

.container {
    @include center;
    &_list {
        @include flex;
    }
}

.container1 {
    @include center;
}
复制代码

编译后

复制代码
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    text-align: center;
}
.container_list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.container1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    text-align: center;
}
复制代码

@mixin参数
使用@mixin 名称 (变量1,变量2,....)格式定义

复制代码
@mixin flex($justify, $align) {
    display: flex;
    justify-content: $justify;
    align-items: $align;
}

.container {
    @include flex(center, center);
}
复制代码

编译后

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin默认参数

复制代码
@mixin flex($justify: center, $align: center) {
    display: flex;
    justify-content: $justify;
    align-items: $align;
}

.container {
    @include flex(center, center);
}

.container1 {
    @include flex;
}

.container2 {
    @include flex(flex-start, flex-end);
}
复制代码

编译后

复制代码
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container2 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
复制代码

@function#

使用@function定义函数,使用@return定义函数返回值

复制代码
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
    @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar {
    width: grid-width(5);
}
复制代码

编译后

#sidebar {
    width: 240px;
}

 

 https://www.cnblogs.com/jwyblogs/p/17027385.html

　

posted @   Tipsy（微醺）  阅读(222)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
more_horiz
keyboard_arrow_up light_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示