程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 > css预处理器scss

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

  发布时间：2023-01-05 16:42:30   作者：半糖也很甜吖   我要评论
scss在css基础语法上面增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，使用scss可以很方便的提高开发效率，这篇文章主要介绍了css预处理器scss/sass语法以及使用,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

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('?css/xxx');
        size: 100%;
    }
}

编译后

.container {
    width: 500px;
    height: 100px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold;
    background-image: url('?css/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内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！

相关文章

  • 使用CSS+HTML实现简单的魔幻霓虹灯文字特效

    这篇文章主要介绍了使用CSS+HTML实现简单的魔幻霓虹灯文字特效,CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样
    2023-05-08

  • css实现电梯导航的项目实践

    CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小，本文主要介绍了css实现电梯导航，具有一定的参考价值，感兴趣的可以了解
    2023-05-06

  • CSS中calc(100%-100px)不加空格不生效

    本文主要介绍了CSS中calc(100%-100px)不加空格不生效，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学
    2023-05-05

  • css弧边选项卡的项目实践

    本文主要介绍了css弧边选项卡的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05

  • CSS实现鼠标悬浮动画特效

    Css(层叠样式表)是种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,
    2023-05-04

  • CSS link与@import的区别和用法解析

    CSS的link和@import都是用于引入外部CSS文件的方法，但它们有一些区别和不同的用法，本文通过一个简单的代码演示，展示了link和@import的用法，感兴趣的朋友跟随小编一起看
    2023-05-04

  • 使用CSS实现百叶窗效果示例代码

    这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的，做出来的百叶窗效果也是很丝滑，文中提供了详细的代码,需要的朋友可以参考
    2023-04-28

  • 使用CSS实现按钮边缘跑马灯动画

    这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的，文中提供了详细的代码,需要的朋友可以参考下
    2023-04-28

  • css旋转导航的示例代码

    本文主要介绍了css旋转导航的示例代码，文中通过示例代码介绍的非常详细，该导航可用在一些网站首页导航栏中，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-27

  • css实现交融文字效果的项目实践

    这篇文章将介绍如何使用CSS实现交融文字效果，这是一种独特的标题设计，可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性，我们可以创建出字母之间交
    2023-04-27

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com