随笔分类 -  sass入门

sass(混合mixin的调用、@content)
摘要：sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用 1、无参数mixin scss.style css.style 2、有参数mixin scss.style css.style 3、多个参数 阅读全文
posted @ 2018-09-16 23:50 酸笋 阅读(1950) 评论(0) 推荐(0)
sass（@at-root与&配合使用、without和with）
摘要：@at-root与&配合使用(找父级) scss.style css.style 应用于@keyframe scss.style css.style @at-root (without: ...)和@at-root (with: ...) 默认@at-root只会跳出选择器嵌套，而不能跳出@medi 阅读全文
posted @ 2018-09-16 23:41 酸笋 阅读(742) 评论(0) 推荐(0)
sass文件处理
摘要：sass注释方式有两种： 1、标准的css注释/**/； 2、//双斜杠形式的单行注释（不会被转译）； 标准的css注释 双斜杆单行注释 sass文件后缀名有两种： 1、后缀名为sass，不适用用大括号和分号； 2、后缀名为scss，这种文件跟css文件使用类似，使用大括号和分号； （建议使用后缀名 阅读全文
posted @ 2018-09-16 23:34 酸笋 阅读(328) 评论(0) 推荐(0)
sass继承
摘要：@extend sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。 scss.style css.style 从sass 3.2.0以后就可以定义占位选择器%。 这种选择器的优势在于：如果不调用则不会有任 阅读全文
posted @ 2018-09-16 23:27 酸笋 阅读(354) 评论(0) 推荐(0)
sass运算
摘要：sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。 请注意运算符前后请留一个空格，不然会出错。 scss.style css.style 阅读全文
posted @ 2018-09-16 23:17 酸笋 阅读(325) 评论(0) 推荐(0)
sass的嵌套
摘要：sass的嵌套包括两种： 1、选择器的嵌套。（最常用到） 指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。 在选择器嵌套中，可以使用&表示父元素选择器 scss.style css.style 2、属性嵌套 指的是有些属性拥有同一个开始单词，如border-w 阅读全文
posted @ 2018-09-16 23:13 酸笋 阅读(385) 评论(0) 推荐(0)
sass判断语句
摘要：@if判断 @if可一个条件单独使用，也可以和@else结合多条件使用 scss.style css.style 三目判断 语法为：if($condition, $if_true, $if_false) 。 三个参数分别表示：条件，条件为真的值，条件为假的值。 scss.style css.styl 阅读全文
posted @ 2018-09-16 23:05 酸笋 阅读(6660) 评论(0) 推荐(1)
sass变量
摘要：sass变量用法 1、sass变量必须以$符开头，后面紧跟着变量名 2、变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样） 3、如果值后面加上!default则表示默认值 默认变量 sass的默认变量：仅需要在值后面加上!default即可。 scss.style css.sty 阅读全文
posted @ 2018-09-14 15:55 酸笋 阅读(936) 评论(0) 推荐(0)
Ruby（或cmd中）输入命令行编译sass
摘要：Ruby（或cmd中）输入命令行编译sass步骤如下： 举例： 1、在F盘中新建一个总文件夹，比如test文件夹，其中在该文件夹下面建立html、images、js、sass等文件夹。 2、在sass文件夹中创建要使用到的sass文件，或者scss文件。common.scss、reset.scss、 阅读全文
posted @ 2018-09-10 21:03 酸笋 阅读(370) 评论(0) 推荐(0)
sass的安装
摘要：sass的安装 1、当ruby安装完成后，在自己电脑开始菜单下面找到ruby的控制台"cmd"; 2、然后直接在命令行中输入 gem install sass 3.在安装过程中 可能会遇到报错： 解决方法： 更换rubygems路径 在命令行内输入以下命令： $ gem sources --remo 阅读全文
posted @ 2018-09-10 20:38 酸笋 阅读(205) 评论(0) 推荐(0)