SASS知识点

jhhfft 发布于2019-08-29 13:55 / 824人阅读

SASS介绍

css预处理器。其实还有用的很多的less，stylus。
SASS支持所有css语法
基础的文件命名方法以_开头

准备工具

SASS编译工具
?官方下载地址，下载对应版本

用法：

将项目中的css文件夹拖入Koala

创建sass文件后缀demo.sass (Koala会自动编译成demo.css)

demo.html正常引入demo.css 文件

SASS基础知识 变量

demo.scss

$bg-color : #00a1e9;
$bg-red : red;
$nav-height : 50px;

body{
    background: $bg-color;
}
.demo{
    height:$nav-height / 2;
}

编译文件 demo.css

body {
  background: #00a1e9; 
}
.demo {
  height: 25px;
}

嵌套

demo.scss

a{
    &:hover{
        .demo{
            background: $bg-red; 
        }
    }
    
}

编译文件 demo.css

a:hover .demo {
  background: red; 
}

继承

demo.scss

.sub-title {
      color: #666;
      margin: 0;
      text-align: center;
      font-size: 32px;
      font-weight: bold;
}
p {
      @extend .sub-title;
      background: #fff;
}

编译文件 demo.css

.sub-title, p {
  color: #666;
  margin: 0;
  text-align: center;
  font-size: 32px;
  font-weight: bold; 
}

p {
  background: #fff; 
}

类似函数

sass通过关键字 @mixin定义类似函数格式：@mixin 函数名(){ }
通过@include 引入函数

封装函数可以写在一个多带带的sass文件里，方便管理

//兼容ie opacity封装
@mixin opacity($opacity){
    opacity: $opacity;
    filter: alpha(opacity=$opacity * 100);
}
//使用
.demo{
    @include opacity(1);
}


----------
//编译结果
.demo {
  opacity: 1;
  filter: alpha(opacity=100); 
}

引入封装函数

比如：项目中有基础文件
_mixin.scss
_header.scss
_footer.scss

文件index.scss正好也需要引入这三个基础文件

@import "mixin";
@import "header";
@import "footer";

引入基础的scss，不需要下划线和后缀名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112802.html

sass的基本使用

摘要：本文所有的例子都是在中编译，而可以自行编译，具体可以查看该链接配置的概念定义是的一种预处理器，文件后缀名为，可以用中的来转成样式。最近在项目中利用到了css预处理器（sass），而之前没接触过的本博主出于好奇心，就在业余的时间里搜了一些资料来看看，看完后觉得sass挺不错，就想简单的介绍一下sass的基本使用方法（ps：本文只介绍sass的一些基本使用，而这些内容都是本博主觉得比较有...

alighters 2019-08-30 15:53 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

xuweijian 2019-08-02 11:15 评论0 收藏0
SASS学习记录

摘要：前言很久没有用文章记录自己的学习历程了，主要是因为实在写的不行，相比大牛写的博客，我这只能算是东拼西凑或者说是读书笔记。以前我只使用外部，现在的更加好用，所以在学习过程中记了一些笔记。在后面加一个感叹号，表示这是重要注释。前言很久没有用文章记录自己的学习历程了，主要是因为实在写的不行，相比大牛写的博客，我这只能算是东拼西凑或者说是读书笔记。但是今天还是拾起笔来了，虽然没什么干货，但...

tylin 2019-08-20 14:25 评论0 收藏0
SASS学习记录

摘要：前言很久没有用文章记录自己的学习历程了，主要是因为实在写的不行，相比大牛写的博客，我这只能算是东拼西凑或者说是读书笔记。以前我只使用外部，现在的更加好用，所以在学习过程中记了一些笔记。在后面加一个感叹号，表示这是重要注释。前言很久没有用文章记录自己的学习历程了，主要是因为实在写的不行，相比大牛写的博客，我这只能算是东拼西凑或者说是读书笔记。但是今天还是拾起笔来了，虽然没什么干货，但...

HollisChuang 2019-08-30 15:52 评论0 收藏0