sass语法

分类:Web前端, 发布于 2021-06-05 10:18:25,评论(0)浏览(714)

1 @import 指令可以让我们导入其他文件等内容。

2 包含文件时不需要指定文件后缀,Sass 会自动添加后缀 .scss

3 如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件,你可以在文件名的开头添加一个下4 划线。这将告诉 Sass 不要将其编译到 CSS 文件

5 如果要导入该文件,则不需要使用下划线

6 注意:请不要将带下划线与不带下划线的同名文件放置在同一个目录下,比如,_colors.scss 和 colors.scss 不能同时存在于同一个目录下,否则带下划线的文件将会被忽略。

7 @mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

8 @extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

9 Sass 支持标准的 CSS 多行注释 /* */,以及单行注释 //,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会

10 将局部变量转换为全局变量可以添加 !global 声明:

#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}

11 SassScript 支持 6 种主要的数据类型:

数字,1, 2, 13, 10px

字符串,有引号字符串与无引号字符串,"foo", 'bar', baz

颜色,blue, #04a3f9, rgba(255,0,0,0.5)

布尔型,true, false

空值,null

数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif

maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)


12 SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。

关系运算 <, >, <=, >= 也可用于数字运算,相等运算 ==, != 可用于所有数据类型。

+ 可用于连接字符串

p {

  cursor: e + -resize;

}

编译为

p { cursor: e-resize; }

13 通过 #{} 插值语句可以在选择器或属性名中使用变量:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue; }


base64编码后的字符串长度

分类:Web前端, 发布于 2017-08-09 01:50:49,评论(0)浏览(844)

beforeEncode为Encode之前的字符串

那么Encode后的字符串长度为:

1、如果beforeEncode.length()是3的整数倍,那么长度为

 (beforeEncode.length()/3)*4

2、如果beforeEncode.length()不是3的整数倍,那么长度为

(beforeEncode.length()/3+1)*4

nodejs: 使用config管理配置文件

分类:Web前端, 发布于 2017-05-10 07:03:11,评论(0)浏览(877)

安装config,

npm install config --save
touch config/default.json

写入内容如:

{"session_secret":"zainboy"}

使用:

var config = require('config');
var sessionSecret = config.get('session_secret');

大功造成。

bootstrap 3 模态框垂直居中

分类:Web前端, 发布于 2017-03-06 10:45:22,评论(0)浏览(934)

覆盖部分CSS代码就可实现bootstrap 模态框垂直居中。

代码如下:

.modal.in .modal-dialog{
    -webkit-transform:translate(0,-50%);
    -ms-transform:translate(0,-50%);
    -o-transform:translate(0,-50%);
    transform:translate(0,-50%);
}
.modal-dialog{
    position:absolute;
    width:auto;
    margin:10px auto;
    left:0;
    right:0;
    top:50%;
}
@media (min-width:768px){
    .modal-dialog{
        width:600px;
    }
}