sass常用语法

legendmohe 发布于2019-08-30 13:05 / 1182人阅读

摘要：常用语法是的预处理器，提供了很多方便的语法，如嵌套可复用代码块等，但是我们在做一般程序的时候用不上这么多功能，这里总结了里我用的最多的几种常用语法定义变量元素包含伪类的嵌套这里的指的是前面的选择器。

sass常用语法

sass是css的预处理器，提供了很多方便的语法，如嵌套、可复用代码块等，但是我们在做一般程序的时候用不上这么多功能，这里总结了sass里我用的最多的几种常用语法：

定义变量

$ff: Arial;
$font-color: #ccc;
$background-grey: #f5f5f5;

元素（包含伪类）的嵌套

a {
  color: $font-color;
  cursor: pointer;
  &:hover {
    text-decoration: none;
  }
}

这里的&指的是前面的选择器。

属性的嵌套

  font: {
    family: $ff;
    size: 26px;
    weight: 900;
  }

类的继承及不表现样式

%error {
  color: #f00;
}

%error.instrusion {
  background-image: url(../images/rabbit-big.png);
}

.serious-error {
  @extend %error;
  border: #ff0000 1px solid;
}

这里的%error是不表现样式，只能用来继承。

可复用代码块@mixin

@mixin col-sm ($width:50%){
  @media (min-width: 768px) {
    width: $width;
    float: left;
  }
}

这里定义了一个名为col-sm的代码块通过后面的括号传参，名为$width的参数默认值为50%，里面的@media是媒体查询，也可以不传变量，去掉后面的括号就行。

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

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

sass的基本使用

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

alighters 2019-08-30 15:53 评论0 收藏0
vscode常用插件【全了】

摘要：插件集待补充。。。同时，它还包含了用于转换为格式和生成数据模式的选项用于压缩合并和文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为文件的选项。修改文本的更多命名格式，包括驼峰命名下划线分隔命名，命名以及命名等切换漂亮的主题插件集待补充。。。 20180903 文件【Path Intellisense】自动补全路径浏览器【Open-In-Browser】在...

kyanag 2019-08-30 13:57 评论0 收藏0
vscode常用插件【全了】

摘要：插件集待补充。。。同时，它还包含了用于转换为格式和生成数据模式的选项用于压缩合并和文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为文件的选项。修改文本的更多命名格式，包括驼峰命名下划线分隔命名，命名以及命名等切换漂亮的主题插件集待补充。。。 20180903 文件【Path Intellisense】自动补全路径浏览器【Open-In-Browser】在...

xcc3641 2019-08-26 11:42 评论0 收藏0
前端开发VScode常用插件

摘要：名称功能自动闭合标签自动提示修改标签时，自动修改匹配的标签格式化编写更加人性化的注释添加行书签的浏览器兼容性检查运行选中代码段支持大量语言，包括单词拼写检查在中弹出浏览器并搜索，可编辑搜索引擎颜色值在代码中高亮显示小窗口显示颜色值，等等拾色名称功能 Auto Close Tag 自动闭合HTML标签 Auto Import...

hellowoody 2019-08-21 18:21 评论0 收藏0