1、变量$
全局
局部

.div{

$color:yellow;

}

2、类似函数
@mixin border-radius($radius) { }
引用:@include border-radius(10px);
3、运算
4、继承%
引用:@extend
5、父类&
6、可嵌套

7、条件判断

参考:https://www.jianshu.com/p/fa379a309c8a

https://www.w3cplus.com/preprocessor/Sass-control-directives-if-for-each-while.html

https://www.w3cplus.com/preprocessor/background-placeholders-with-gradients.html

scss基础的更多相关文章

  1. Scss基础用法

    Scss基础用法 一.注释用法: (1)//comment:该注释只是在.scss源文件中有,编译后的css文件中没有. (2)/! /:重要注释,任何style的css文件中都会有,一般放置css文 ...

  2. Sass/Scss 基础篇

    Sass/Scss 基础篇 总结Sass学习到的内容 应用Sass/Scss前,环境配置 首先下载Ruby (http://rubyinstaller.org/downloads) 通过命令下载sas ...

  3. LESS SCSS 预编译语言

      前  言 JRedu LESS  是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. LESS 为 Web 开发者带来了福音,它在 ...

  4. 在vue-cli中安装scss,且可以全局引入scss的步骤

    简历魔板__个人简历模板在线生成 在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知 ...

  5. 详解Bootstrap面板组件

    面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了 ...

  6. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

  7. 六、VueJs 填坑日记之初识*.Vue文件

    上一篇博文中,我们将接口的地址通过webpack代理到了本地,解决了跨域的问题.在之前的文章中,我们一直对项目进行配置,并没有真正的切入正题,可能很多人还不明白我们要做什么?那么今天,我们就要开写代码 ...

  8. Webpack3.0入门指南

    前言 本文是基于我厂基友的Webpack学习系列(一)初学者使用教程 这篇文章做构建.可能基友的文章是基于Mac环境,我是windows环境,在学习时遇到了很多坑,询问基友,他让我搞个基于window ...

  9. sass 工具库

    github : https://github.com/uustoboy/base_mixins ( 有坑慎用 ) 项目截图: _base_mixins.scss 混合宏的引入文件; _setting ...

随机推荐

  1. muduo库源码剖析(一) reactor模式

    一. Reactor模式简介 Reactor释义“反应堆”,是一种事件驱动机制.和普通函数调用的不同之处在于:应用程序不是主动的调用某个API完成处理,而是恰恰相反,Reactor逆置了事件处理流程, ...

  2. duilib-Ex-Debug

    因为一些事件google无法訪问,托管在其上的项目也无法检出也基本无人更新,因此维护了一个版本号,用于排除已有的bug和扩展一些功能.这样能够避免反复造轮子和反复的修车子.欢迎大家一起维护.本人能力和 ...

  3. 关于require.js的用法总结

    require.js就是将多个js文件集中化处理,在要运行的HTML文件里,写入<script data-main='js/main.js' src='js/require.js'>< ...

  4. Python图像处理库:PIL中Image,ImageDraw等基本模块介绍

    Python图像处理库:PIL中Image,ImageDraw等基本模块介绍 标签: 图像处理PILPYTHON 2016-08-19 10:58 461人阅读 评论(0) 收藏 举报  分类: 其他 ...

  5. Android EditText默认不获取焦点

    1.当页面中有多个EditText时,第一个EditText会自动获取焦点,取消的办法: 在EditText的父View中调用: android:focusable="true"  ...

  6. dotnet core 文档链接

    The installation was successful The following were installed at C:\Program Files\dotnet • .NET Core ...

  7. Ubuntu环境下安装nodejs和npm

    1.安装python-software-properties sudo apt-get install python-software-properties 2.添加ppa curl -sL http ...

  8. 重装mysql

    重装mysql方法. 转自http://blog.sina.com.cn/s/blog_73000beb01012eh4.html 1.删除 mysql 1.1 sudo apt-get autore ...

  9. Luogu4198 楼房重建

    https://zybuluo.com/ysner/note/1124880 题面 带修改的区间维护最大斜率. 题面 解析 用线段树区间维护斜率. 考虑如何向上合并. 左半段一定有贡献. 如果左半段的 ...

  10. IP V4 和 IP V6 初识

    IP V4    是互联网协议的第四版 地址长度为32位,4字节,用十进制表示 格式为:A.B.C.D 最大的问题在于网络地址资源有限,严重制约了互联网的应用和发展 IP V6    是互联网协议的I ...