【sass】上手sass

最新推荐文章于 2021-07-23 16:40:22 发布
最新推荐文章于 2021-07-23 16:40:22 发布
阅读量194 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/108152332
版权

文章目录

变量
定义/引用变量

变量可以定义在规则块内，也可以定义在规则块外。
定义在规则块外，类似于全局变量；定义在规则块内，则类似于局部变量，只能在该规则块内使用。

<body>
  <div class="box"></div>
</body>

$box-bck-color:lightskyblue;
.box{
    $box-width:100px;
    width: $box-width;
    height: 100px;
    background-color: $box-bck-color;
}

sass index.scss index.css，编译后结果如下：

.box {
  width: 100px;
  height: 100px;
  background-color: lightskyblue; 
}

在这里插入图片描述

变量值中引用其他变量
$basic-color:lightskyblue;
$basic-border:2px solid $basic-color;
.box{
    width: 100px;
    line-height: 100px;
    text-align: center;
    background-color: lightgoldenrodyellow;
    color:$basic-color;
    border:$basic-border;
}

在这里插入图片描述

变量默认值

$box-bck-color:lightskyblue !default;

嵌套css规则
后代选择器
<body>
<div class="container">
    <div class="content"></div>
</div>
</body>

.container{
    width:100px;
    height: 100px;
    background-color: lightskyblue;
    display: flex;
    align-items: center;
    justify-content: center;
    .content{
        width: 50%;
        height: 50%;
        background-color: orange;
        border-radius: 50%;
    }
}

在这里插入图片描述

父选择器
<body>
<div class="container">
    <div class="content"></div>
</div>
</body>

.container{
    width:100px;
    height: 100px;
    background-color: lightskyblue;
    display: flex;
    align-items: center;
    justify-content: center;
    .content{
        width: 50%;
        height: 50%;
        background-color: orange;
        border-radius: 50%;
        cursor:pointer;
        &:hover{
            background-color:lightgoldenrodyellow;
        }
    }
}

在这里插入图片描述

群组选择器
<body>
<div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>
</div>
</body>

.container{
    width: 200px;
    height: 200px;
    background-color:lightskyblue;
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    .box1,.box2{
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 5%;
        flex:0 1 60px;
    }
    .box1{
        background-color: orange;
    }
    .box2{
        background-color: lightgoldenrodyellow;
    }
}

在这里插入图片描述

子选择器/兄弟选择器/相邻兄弟选择器
  • 子选择器
    >，仅包含 儿子元素
  • 兄弟选择器
    ~，包含 后面所有的兄弟元素
  • 相邻兄弟选择器
    +，仅包含 后面相邻的兄弟元素
<body>
<ul class="list">
    <li class="item"><a href="">1</a></li>
    <li class="item"><a href="">2</a></li>
    <li class="item"><a href="">3</a></li>
</ul>
</body>

.list{
    list-style: none;
    padding:0;
    margin:20px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    background-color: lightskyblue;
    >.item{
        display: inline-block;
        vertical-align: middle;
        overflow: hidden;    
        >a{
            width: 36px;
            line-height: 36px;
            margin:10px;
            text-align: center;
            text-decoration: none;
            font-size:14px;
            color:hsla(0,50%,0%,.3);
            background-color: orange;
            float:left;          
            &:hover{
                background-color:orangered;
                color:hsla(0,50%,0%,1);                
            }  
        }    
    }
}

在这里插入图片描述

嵌套属性
<body>
<div class="container">hello</div>
</body>

$height:100px;
.container{
    width: 100px;
    height: $height;
    line-height: $height;
    text-align: center;
    border:{
        width:2px;
        style:solid;
        color:lightskyblue;
    }
}

$height:100px;
.container{
    width: 100px;
    height: $height;
    line-height: $height;
    text-align: center;
    border:2px solid lightskyblue{
        top:0;
        bottom: 0;
    }
}

在这里插入图片描述

混合器
无参混合器

定义混合器，@mixin 混合器名 {css样式}；
使用混合器，@include 混合器名;。

混合器中包含属性
<body>
  <div class="container">
    <div class="content">hello</div>
  </div>
</body>

@mixin blue-square{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;;
    background-color:lightskyblue;
    color:white;
}
.container{
    width: 200px;
    height: 200px;
    background-color: lightgoldenrodyellow;
    display: table-cell;
    vertical-align: middle;
    border-radius: 50%;;
    .content{
        margin:0 auto;
        border-radius: 50%;
        @include blue-square;
    }
}

在这里插入图片描述

混合器中包含属性和css规则
<body>
  <div class="container">
    <div class="content">hello</div>
  </div>
</body>

@mixin blue-square{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;;
    background-color:lightskyblue;
    color:white;
}

@mixin ring{
    width: 200px;
    height: 200px;
    background-color: lightgoldenrodyellow;
    display: table-cell;
    vertical-align: middle;
    border-radius: 50%;;
    .content{
        margin:0 auto;
        border-radius: 50%;
        @include blue-square;
    }   
}

.container{
    @include ring;
}

在这里插入图片描述

含参混合器

定义混合器，@mixin 混合器名() {css样式}；
使用混合器，@include 混合器名();。

<body>
  <div class="container">
    <div class="content">hello</div>
  </div>
</body>

@mixin blue-square($width,$height,$bck-color,$color){
    width: $width;
    height: $height;
    line-height: $height;
    text-align: center;;
    background-color:$bck-color;
    color:$color;
}

@mixin ring($width,$height,$bck-color){
    width: $width;
    height: $height;
    background-color: $bck-color;
    display: table-cell;
    vertical-align: middle;
    border-radius: 50%;;
    .content{
        margin:0 auto;
        border-radius: 50%;
        @include blue-square($width/2,$height/2,lightskyblue,white);
    }   
}

.container{
    @include ring(200px,200px,lightgoldenrodyellow);
}

在这里插入图片描述

默认参数
<body>
  <div class="container">
    <div class="content">hello</div>
  </div>
</body>

@mixin blue-square(
    $width:100px,
    $height:100px,
    $bck-color:lightskyblue,
    $color:white)
    {
    width: $width;
    height: $height;
    line-height: $height;
    text-align: center;;
    background-color:$bck-color;
    color:$color;
}

@mixin ring(
    $width:200px,
    $height:200px,
    $bck-color:lightgoldenrodyellow)
    {
    width: $width;
    height: $height;
    background-color: $bck-color;
    display: table-cell;
    vertical-align: middle;
    border-radius: 50%;;
    .content{
        margin:0 auto;
        border-radius: 50%;
        @include blue-square();
    }   
}

.container{
    @include ring();
}

在这里插入图片描述

继承

@extend

<body>
  <span class="warn">!</span>
  <span class="seriousWarn">!</span>
</body>

.warn{
    display: inline-block;
    width: 48px;
    line-height:48px;
    background-color:orange;
    color:white;
    border-radius: 50%;
    text-align: center;
    font-family: Microsoft Yahei;
    font-size:36px;
    font-weight: bold;
  }
  .seriousWarn{
    background-color:orangered;
    @extend .warn;
  }

在这里插入图片描述

sass文件导入

可以在规则块外导入，也可以在规则块外导入。

在规则块外导入
<body>
  <div class="container">
    <div class="content">hello</div>
  </div>
</body>

//help.scss
.container{
    .content{
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;;
        background-color:lightskyblue;
        color:white;
    }
}

//index.scss
@import "./help.scss";
.container{
    width: 200px;
    height: 200px;
    background-color: lightgoldenrodyellow;
    display: table-cell;
    vertical-align: middle;
    border-radius: 50%;;
    .content{
        margin:0 auto;
        border-radius: 50%;
    }
}

在这里插入图片描述

在规则块内导入
<body>
  <div class="container">
    <div class="content">hello</div>
  </div>
</body>

//help.scss
.content{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;;
    background-color:lightskyblue;
    color:white;
}

//index.scss
.container{
    @import "./help.scss"
}

在这里插入图片描述

原生CSS导入/sass导入

在这里插入图片描述
在这里插入图片描述

局部文件

文件名以_开头，编译时不会生成对应的独立.css文件

定义变量默认值/覆盖变量默认值

!default

//help.scss
$box-bck-color:lightskyblue !default;
.box{
    $box-width:100px;
    width: $box-width;
    height: 100px;
    background-color: $box-bck-color;
}

//index.scss
$box-bck-color: orange;
@import "./help.scss";

在这里插入图片描述

参考文档

sass教程

richest_qi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sass思维导图（基本内容）
03-05
sass思维导图，便于初学者快速了解和上手，文中截图多引用sass中文官网，更多细节请去官网了解
sass的脑图
dicha7140的博客
07-03 116
转载于:https://www.cnblogs.com/CyLee/p/7111095.html
SASS简单总结
前端疯
08-26 2614
一、介绍篇 SASS是一个前端工具，它定义了css的一种新的写法，让写css更加简单:符合SASS语法的css都放在.scss为后缀的文件中，然后通过命令将SASS语法的css编译为传统的css。 二、安装篇 首先要安装SASS，因为SASS是Ruby语言写的，windows平台下要安装RubyInstaller。 然后打开命令行：输入 gem install sass
SASS学习总结
qq_42889406的博客
08-16 2523
思维导图： 1. SASS作用 CSS预处理器，功能上大同小异，都是使用类似程序样式语言的方式来编写CSS，都具有变量，混入，嵌套，继承等特性，最终目的都是方便CSS的书写及维护。 2. SASS注释 标准注释：/ 评论 /，会保留到编译后的文件。 单行注释：//评论，只保留在Sass源文件中，编译后被省略。 强制注释：/！ 评价/ 在压缩状态 下也显示； 3. SASS样式导入 @import 可以根据文件扩展名不同而用不同的方式处理 如果文件是.css的扩展名，将与CSS中的@import语句保
sass入门.pptx
07-02
后来引入的SCSS（Sassy CSS）是Sass的另一种语法形式，它采用了更接近CSS的语法，以`.scss`为扩展名，支持使用大括号和分号，对于习惯CSS的开发者来说更容易上手。 ### 结论 Sass作为一种CSS预处理器，极大地提高...
Sass(3.4.21)中文文档
06-15
文档中应该包含了丰富的示例和解释，帮助你快速上手并熟练掌握Sass的使用。同时，`Sass (3.4.21) 中文文档_files`文件夹可能包含文档中引用的图片或其他资源，以增强学习体验。学习Sass不仅可以提升你的CSS编写效率...
ruby sass compass
01-19
Ruby Sass Compass是一个强大的前端开发工具组合，主要用于CSS样式表的..."ruby_sass_compass"压缩包中的资源可以帮助你快速上手并深入了解这个工具组合。通过实践和学习，你将能够更好地管理和组织CSS，提高工作效率。
一张图了解：sass
Mark_JF00的博客
04-17 564
sass面试题：http://www.w3cschool.cn/sass/sass_interview_questions.html
sass自学入门总结
Selina_Chan的博客
11-21 622
首先分享一个便利的在线编辑sassmeister 一、输出方式 同样的一份sass代码： nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px;
sass学习笔记
小葱的博客
01-21 344
一、css预处理器 SASS 二、预处理器 scss语言 三、混合宏 四、占位符 % 优点:高效 缺点:不能接受参数 五、响应式
sass和compass学习笔记
Anerror的博客
08-18 299
sass和compass学习笔记 学习sass和compass做成的思维导图： 以下是补充： 1、对比起混合器，使用继承生成的css代码体积会更小，因为只是重复了选择器 2、.scss（使用大括号)和.sass(使用缩进）可以在同一个项目中使用，但不能在同个文件使用 3、原生css@import会降低性能，必须先把引用文件下载才能渲染 4、sass是css的超集，支持css的所有用...
Sass初级实战
wustlucy的博客
04-30 399
安装配置环境之后，通过项目目录sass demo1.scss命令行会自动生成相对应的css代码sass demo1.scss demo1.css命令行会生成demo1.css文件且会自动生成demo1.css.map：sass文件相当于源文件，css相当于编译后的文件，当检查到页面问题的时候，你看到的是css，但是需要修改的是sass文件，这个map就是两个文件的对应关系表。...
sass最简教程，从入门到上手，简单易学
CRMEB小程序商城的博客
07-23 1682
以上就是sass的logo, 开始之前你首先得具备html和css的基本知识！ 什么是sass？ Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。 Sass 是一个 CSS 预处理器。 Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。 Sass 完全兼容所有版本的 CSS。 Sass 扩展了 CSS3，增加了.
学习Sass时的概念整理和学习路线
a343542102的博客
03-21 206
sass概念 1.基本语法 2.@charset 统一规定 scss 文件 必须加@charset 同时统一定义为 @charset "UTF-8"; 3.数据类型 与变量 数字，1, 2, 13, 10px 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz 颜色，blue, #04a3f9, rgba(255,0,0,0.5) 布尔型，true, false...
使用 sass/scss 编写CSS 快速上手
热门推荐
阿修罗道
04-09 1万+
CSS不是一种编程语言，它只是个配置文件，并没有生命。但我等大程序怎么能容忍自己写出来的东西不能动态变化，不能封装继承，不能xxoo呢，于是就有了css预处理的概念。这篇文章主要介绍scss的基本用法......
Sass官网
m0_37477061的博客
07-23 1024
https://www.sass.hk/
掌握Sass与Compass：实战指南
书中的实例和实践指南旨在帮助读者快速上手，并在实际项目中应用这些技术。 通过阅读《Sass and Compass In Action》，读者不仅可以掌握Sass的基本语法和高级特性，还能学习到如何有效地利用Compass来优化CSS工作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值