当前位置: 七九推 > IT编程>网页制作>CSS > CSS预处理器scss/sass语法及使用教程

CSS预处理器scss/sass语法及使用教程

2023年01月07日 CSS 我要评论
scssscss在css基础语法上面增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,使用scss可以

scss

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

scss

.container {
    width: 100px;
    height: 100%;
    .nav {
        width: 100px;
    }
}

sass

.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;
}

到此这篇关于css预处理器scss/sass语法及使用教程的文章就介绍到这了,更多相关css预处理器scss内容请搜索七九推以前的文章或继续浏览下面的相关文章,希望大家以后多多支持七九推!

(0)
打赏 微信扫一扫 微信扫一扫

相关文章:

  • ai怎么用两条线画出爱心形状? ai两条线条绘制心形的技巧

    工作的时候,使用ai时,怎么画出爱心图表?具体操作步骤如下:新建画布,然后绘制两条直线。绘制完毕,点击描边选项。在下拉选项中将粗细调节至100左右。返回到主界面中,修改颜色,即可看…

    2022年11月26日 网页制作
  • PS怎么设置CSS样式? PS中的图形CSS样式使用方法

    在ps中的属性中有个css样式,这个是什么东西呢,很多小伙伴们不懂,这个css是代码的修饰属性,在代码中使用,也就是说我们所给图形添加的图形样式属性可以直接添加到代码中哦。如图,下…

    2022年11月26日 网页制作
  • CSS使用SVG实现动态分布的圆环发散路径动画

    CSS使用SVG实现动态分布的圆环发散路径动画

    开篇这个需求也是最近的 大屏项目 里面需要用到的一个效果,大致需求是实现一个圆形范围内 由一个不确定坐标的点 向圆周进行曲线发散 的效果,曲线圆弧向上并伴随路径... [阅读全文]
  • CSS中理解层叠性及权重如何分配

    CSS中理解层叠性及权重如何分配

    前言大家好,我是翼同学。今天笔记的内容是: css的三大特性,分别是层叠性、优先性和继承性三大特性☀️层叠性什么是层叠性?在css中,样式的设置顺序很重要... [阅读全文]
  • CSS 鼠标点击拖拽效果的实现代码

    背景鼠标拖拽元素移动,算是一个稍微有点点复杂的交互。而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 css 就能够实现的鼠标点击拖拽效果。在之前的这篇文章中 -- 不可…

    2022年10月11日 网页制作
  • 一些网址链接

    一些网址链接

    http://jh.itv.mop.com/index.php?act=index.show!180!661!80102!7955#top  http:... [阅读全文]

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2023  七九推 保留所有权利. 粤ICP备17035492号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com