当前位置：首页 > news >正文

丝绸之路网站建设策划书/网站制作需要多少钱

news 2025/7/1 15:08:53

丝绸之路网站建设策划书,网站制作需要多少钱,清空wordpress数据库表,自己做网站服务器CSS预处理器 CSS预处理器是一种语言用来为css增加一些变成的特性，无需考虑浏览器的兼容性问题，例如你可以在css中使用变量，简单的程序逻辑，函数等等在编程语言中的一些基本技巧，可以让你的css更加简洁，适应…

CSS预处理器

CSS预处理器是一种语言用来为css增加一些变成的特性，无需考虑浏览器的兼容性问题，例如你可以在css中使用变量，简单的程序逻辑，函数等等在编程语言中的一些基本技巧，可以让你的css更加简洁，适应性更强，代码更直观等诸多好处

常见css预处理器

sass,less,stylus的比较
在这里插入图片描述

SASS使用背景

1、CSS 是一些非常基础简单的语句的组合，既然简单的语句，就不可避免的有很多重复，冗余的东西。而且没有传统编程语言变量、控制语句等高级特性，所以造成了 CSS 编写低效，往往需要通过查找替换、大量复制来修改或者编写。
2、 Sass 就是用来弥补这个缺陷，为 CSS 提供额外的高级功能，使其开发更加方便快捷，更加方便管理。所以你需要使用 Sass 的语法来编写代码，然后通过 Sass 编译成具体的 CSS 代码，然后使用。
3、 Sass 的语法是按照一定规则进行缩进然后编写有关 CSS 属性，与传统 CSS 代码差别较大，学习成本高，于是 Sass 就有了一套 Scss 语法规则。Scss 中你可以直接写 CSS，即便你不会 Sass 的语法特性，直接编写 CSS 代码也是可以通过编译的，你只需要保存成 .scss 后缀的文件名即可。

SASS简介

Sass是一种CSS预处理语言，当你使用Sass这门语言时，你使用编译程序来转换Sass文件，通常以SCSS文件格式书写然后转换成CSS文件.
Sass通过使用命令行工作。在它做任何事情前必须先安装Ruby，然后安装SASS。也可使用可视化界面的GUI工具来书写Sass。
可视化工具：Codekit, Prepro, Mixture, Koala, compass.
- Koala (http://koala-app.com/)
- Compass.app（http://compass.kkbox.com/）
- Scout（http://mhs.github.io/scout-app/）
- CodeKit（https://incident57.com/codekit/index.html）
- Prepros（https://prepros.io/）

Sass安装

sass是ruby语言写的，所以必须先安装ruby，然后再把sass装好。

如果你是使用webpack或者其它打包工具，可直接在项目中写sass，比如vue-cli搭建的vue项目，只需要安装sass的loader就可以直接使用了。

这里假定你已经安装好了ruby，接下来只需要在命令行里输入

gem install sass

就可以使用sass了，这点相比less是比较麻烦的。

sass编译

如果你对css是一定的了解，那么对sass的理解也会更加的快，sass文件后缀名是.scss，意思是Sassy CSS。
通过下面的命令可以将.scss文件转化为css代码：

sass test.scss

或者保存一个指定的css文件名：

sass test.scss test.css

SASS提供四个编译风格的选项：

nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
在生产环境中，我们一般是使用compressed来编译

 sass —style compressed style.scss style.css 设置编译风格，

开始使用SASS

在开始之前，确保ruby和sass已安装。创建如下目录：

project—sass—style.scss—cssindex.html

设置项目：
进入project目录，命令行中输入：
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
监听某个文件或目录，一旦文件有变动，
如： sass --watch sass/bootstrap.scss:css/bootstrap.css
就自动生成编译后的版本。html文件中只需简单引入css文件即可。

Sass变量：

   定义方法：$name:value使用方式：$i: 1;$padding-value: 10px;.page-#{$i} {padding: $padding-value;}

SASS宏：@mixin
功能：使用宏，可以避免编写重复代码，一次编写，多次使用。
不带参数宏定义：@mixin name {}
带参数宏定义：@mixin name($param1,[…]){}
例如：

@mixin rounded($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;
}

调用方式：

a {  display:block;width: 10px;height: 10px;@include rounded(5px);
}

SASS嵌套
html元素结构：

<nav><a href="#">首页</a><a href="#">绅蓝移动办公</a><a href="#">绅蓝移动医疗</a><a href="#">关于我们</a>
</nav>

SASS样式嵌套控制：

nav {a {display: inline-block;text-decoration: none;color: $font-color;margin-left: 20px;&:hover {color: darken($blue-light, 10%);}}}

Sass 的数据类型

数字型 (e.g. 1.2, 13, 10px)
文本型，单引号、双引号或者不加都可以 (e.g. "foo", 'bar', baz)
颜色值类型 (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
布尔值 (e.g. true, false)
nulls (e.g. null)
值列表，通过空格或者逗号分割值 (e.g. 1.5em 1em 0 2em,Helvetica, Arial, sans-serif)
值映射，一个关键词对应一个值 (e.g. (key1: value1, key2: value2))

Sass变量的作用域
Sass 中的变量没有块级作用域特性，而是随执行随覆盖随调用。调用的前面没有变量声明，就报错，有很多变量声明，就调用在它上面离它最近的变量值。

$width: 10px;
.wrap{$width: 20px;.main{width: $width;}.sidebar{$width: 30px;width: $width;}$width: 20px;
}
.content{width: $width;
}

引用父级的 &

在嵌套结构中引用父级选择器，这时候就可以用 & 符号代替父级选择器

.parent{color: green;.son{color: red;&:hover{color: blue;}}body.orange &{color: orange;}
}=========编译后==========
.parent {color: green;
}
.parent .son {color: red;
}
.parent .son:hover {color: blue;
}
body.orange .parent {color: orange;
}

让一切变成字符串 #{}
变量能作为属性值来用，也能用在选择器或者属性上面，需要#{}来将变量值转换为字符串，这样就可以用在选择器和属性上了

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

Sass 中的加法

p {$width: 10px;$width2: 20px;width: $width + $width2;
}
在 Sass 数据类型中提到了，10px 这类数值虽然带有字符单位，
但是也算是数值，Sass 会进行计算并对单位进行处理
加法连接字符串时，对于引号的合并也有一定规则，
如果前面字符串带有引号，后面字符串会自动包含在引号中，
如果前面没有，后面带有引号的字符串也会去掉引号
p:before {content: "Foo " + Bar;font-family: sans- + "serif";
}
=======编译后============
p:before {content: "Foo Bar";font-family: sans-serif; 
}如果你想在一段字符串中进行计算并输出，就需要用 #{} 了
$w  : 10;
p:before {content: "I ate #{5 + $w} pies!";
}=======编译后=======
p:before {content: "I ate 15 pies!";
}

Sass 中的除法
因为除法的运算符 / 在 CSS 中也有遇到，例如 font 缩写属性时候的 font-size 和 line-height 属性，就需要 / 来分割。所以，在这些包含 / 的 CSS 属性中对应位置的值，是不会参与运算的。
以下几种情况会参与除法运算：

如果两个值其中一个或两个存放在变量中或者是由函数返回的值。
如果值被包裹在一对括号里面
如果值被作为另一个表达式的一部分

p {font: 10px/8px;             // 纯 CSS 不会运算$width: 1000px;width: $width/2;            // 使用变量，执行运算width: round(1.5)/2;        // 使用函数返回值，执行运算height: (500px/2);          // 使用括号包裹，执行运算margin-left: 5px + 8px/2px; // 用了加法，作为表达式的一部分，执行运算如果想要避免在使用变量的时候，进行了运算，在上面提到了那个例子，使用 #{} 来包裹变量，转换成字符串
}

Sass 运算注意事项

建议运算符之间空开一个空格。注意运算单位。虽然 10px 也被看做是数值型，可以进行数值运算，但是对于单位是有要求的。单位也会参与运算。在运算中，两个操作数单位可以一致，也可以一个数没有单位，也可以都没有，而对于不同的运算操作符，单位运算结果也不同，一般来说测试结果如下：

加法：都没有单位输出纯数字；一方有单位，则结果输出该单位；两方相同单位，结果输出该单位；双方单位不同，报错。减法：类似加法。
除法：两方相同单位，结果无单位；都没有单位，结果无单位；一方有单位另一方无单位，报错。
乘法：两方相同单位，报错；一方有单位，结果输出该单位；两方都无单位，输出无单位。

深入理解 @extend
其他应用类：

.post{@extend .clearfix;...}

@extend 可扩展的选择器：只能扩展单个选择器，可以将多个选择器写进一条 @extend 命令中，用逗号分割
深入理解 @mixin
@mixin 定义的是一个片段，这个片段可以是类似变量的一段文字一条属性，也可以是一整个选择器和内容，也可以是一个选择器的一部分 CSS 代码。此外还可以传递参数，通过参数生成不同代码。
它需要配合 @inclde 命令来引用这段代码，类似复制的效果。
@mixin 定义的内容，不会编译输出。
@extend 就是简单的扩展，基于某个选择器，以提高复用程度
@mixin带参数默认值

@mixin font($color, $fontSize: 14px) {color: $color;font-size: $fontSize;
}
p { @include font(blue); }
h1 { @include font(blue, 20px); }
h2 { @include font($fontSize: 18px,$color: red); }

@mixin 传递多值参数，需要在参数后面加上三个点，表示这个参数可能包含多条属性

@mixin box-shadow($shadows...) {-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}
.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}编译后：
.shadows {-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

灵活的控制语句
@for 循环，就是简单的循环，只能使用数字，每次固定一个步长

@for $i from 5 through 1 {.item-#{$i} { width: 2em * $i; }
}
编译后：
.item-5 {width: 10em;}
.item-3 {width: 6em;}
.item-1 {width: 2em;}.item-4 {width: 8em;}.item-2 {width: 4em;}

@while 循环，@while 和 @for 命令是非常接近的，只不过 @while 循环可以自己定义步长

$i: 6;
@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}
.item-6 {width: 12em; }
.item-4 {width: 8em; }
.item-2 {width: 4em; }

@each 遍历循环，这个是最灵活最实用的循环命令了。你可以用它遍历一个列表或者映射型的变量，然后循环输出

@each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');}
}
编译后：
.puma-icon {background-image: url('/images/puma.png'); }
.sea-slug-icon {background-image: url('/images/sea-slug.png'); }
.egret-icon {background-image: url('/images/egret.png'); }
.salamander-icon {background-image: url('/images/salamander.png'); }