搜公众号
推荐 原创 视频 Java开发 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库

SCSS/SASS 指南

Sutaojie和他的朋友们 2019-02-15
举报

在开始讨论主要的 Sass 之前需要了的点。

小记:所有的 Sass/SCSS 代码编译成标准的 CSS 代码,所以浏览器可以理解并渲染出。浏览器目前不支持直接使用 Sass/SCSS 或其它 CSS 预加载,也没有像标准的 CSS 文档准则确保有可替代的功能。

开始

你可能刚开始不了解 Sassy CSS 强大之处,直到第一次使用 for-loop 来迭代属性值。然而我们从基础的 SCSS 规则开始,一点点地理解。

什么是 Sass/SCSS 能做但原生 CSS 不能做的?

  1. 嵌套规则

  2. 变量

  3. 更方便地操作

  4. 自定义函数

  5. 三角函数

  6. 循环、判断语句

  7. Mixins

Sass 预处理器

SASS — (.sass) Syntactically Awesome Style Sheets.

SCSS — (.scss) Sassy Cascading Style Sheets.

1 使用 Sass 预处理器转换 .scss/.sass 文件

2 基于 $variable 定义

1$number:1px

3 Sass $variable 能被赋给任何 CSS 属性

1#container{
2
3    padding:$number;
4
5}

4 用 CSS 嵌套

 1#A {
2
3    color: red;
4
5}
6
7#A #B {
8
9    color: green;
10
11}

5 用 SCSS 嵌套

 1#A {
2
3    color: red;
4
5    #B {
6
7        color: green;
8
9    }
10
11}

6 使用 & 字符,像 &:hover。

 1#p {
2
3    color:red;
4
5    a {
6
7        &:hover {
8
9            color: green;
10
11        }
12
13    }
14
15}

翻译成

1#p { color: red; }
2
3#p a {}
4
5#p a:hovercolor: green; }

7 通过 @mixin 定义函数赋值给 CSS 属性

 1@mixin flexible() {
2
3    display: flex;
4
5    jusutfy-content: center;
6
7    align-items: center;
8
9}
10
11.centered-elements {
12
13    @include flexible();
14
15    border: 1px solid gray;
16
17}

8 通过 @mixin 处理浏览器前缀

 1@mixin rotate($degree) {
2
3    -webkit-transform: rotate($degree);
4
5    -moz-transform: rotate($degree);
6
7    -ms-transform: rotate($degree);
8
9    transform: rotate($degree);
10
11}
12
13
14
15.rotate-element { @include rotate(45deg); } 

9 数学计算

 1p {
2
3    font-size: 10px + 6px;
4
5    height: 12% - 2%;
6
7    width: 10px * 10;
8
9    padding: 5px + (10px /2) * 3;
10
11}

10 循环,判断语句

 1@mixin zebra() {
2
3    @for $i from 1 through 7 {
4
5        @if ($i %2 == 1and ( $i > 3 ) {
6
7            .stripe-#{$i} {
8
9                color: white;
10
11            }
12
13        }
14
15    }
16
17}
18
19
20
21* { @include zebra(); } 


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《SCSS/SASS 指南》的版权归原作者「Sutaojie和他的朋友们」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注Sutaojie和他的朋友们微信公众号

Sutaojie和他的朋友们微信公众号:xuexiqianduanla

Sutaojie和他的朋友们

手机扫描上方二维码即可关注Sutaojie和他的朋友们微信公众号

Sutaojie和他的朋友们最新文章

精品公众号随机推荐

举报