修改title样式_从CSS到LESS,网页样式工具入门

样式文件是现代网页设计技术的基础之一，从 html 文件中剥离出样式表 css 文件和 js 脚本文件，让网页设计脚本、样式和内容各自分开，才使得互联网工程更容易组织、建设与维护。

1. CSS基本概念

CSS规则主要由选择器及声明两部分组成，类似 selector{property1:value1,property2:value2} 形式，例如：

h1 {color:red; font-size:14px;font-family:"sans serif";}
h2 {color:#ff0000;font-size:12px:text-align:center}
h3 {color:rgb(255,0,0);font-size:10px;font-family:arial,Georigia;}
h4 {color:rgb(100%,0%,0%);font-size:8px;}
h1,h2,h3,h4{font-family:arial,Verdana, sans-serif;}
li strong{font-style:italic;font-weight:normal;}
#sidebar p{text-align:right;margin-top:0.5em;}
.center {text-align:center}
[title]{color:red}
[title=weizhiyong]{border:5px solid blue}

上述示例中，主要包含了以下CSS基础概念和规则：

• 颜色定义可以采用4种不同格式
• 如果属性由多个单词组成需要带引号比如"sans serif"
• 属性的多个值用 , 逗号隔开，不同属性之间用 ; 分号隔开
• CSS对大小写是不敏感的，但是如果和HTML文档一起使用的话， classs 和 id 对应 html 元素则是大小写敏感的
• 可以对选择器分组，例如h1,h2,h3,h4中相同的属性可以通过分组来书写
• 可以通过派生选择器来分层级选择内容，例如 li strong 将 li 列表元素中的 strong 从传统粗体字修改为斜体字。上述示例在以下html程序片段中起作用： <li><strong>这是一部分被修改成斜体的黑体字标识</li> 。
• 在css中使用 # 作为id 选择器，用来选择html文件中的id,例如上述例子中的样式在以下html程序片段中起作用:

<p id="sidebar">这个段落是红色。</p>`

• 在 css 中使用 . 点号作为类选择器，用来选择html文件中的class，例如：

<h1 class="center">
这部分文字会居中对齐
</h1>

• 在 css 中使用 [] 中括号来选择属性，也可以包含属性和值。

有关css样式更多详细资料可以参阅W3School等在线资源。

2. LESS基本应用

CSS格式文件虽然是互联网的统一标准，但在实际项目中由于CSS功能的局限（没有变量、函数等程序设计的基本要素和概念），在书写和维护方面不是很方便，因此，也逐渐出现了以LESS和SCSS为代表的CSS扩展语言，通过变量、函数等方式使得书写CSS文件更为方便，两者在实际使用中各有区别，其中，LESS在Antdesign等开源项目中得到广泛应用。在实际使用中，LESS和SCSS文件都需要通过编译器转换成标准的 .css 文件才能使用。

2.1 LESS的安装

LESS可以在Node.js环境下安装并使用，也可以在浏览器中（Chrome, Firefox, Safari, IE11+或者Edge等现代浏览器）直接使用。在Nodejs中全局安装命令如下：

npm install -g less  //全局安装
lessc styles.less styles.css //将style.less文件编译为style.css文件
//lessc [option option=parameter ...] <source> [destination] less语法格式
npm i less --save-dev //如果不希望全局安装，也可以仅安装在项目目录开发环境中
lessc -v //查看版本 -h 帮助文件

在浏览器环境中使用：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

Less的基本用法包括变量、计算符、嵌套、混合、冒泡以及内置函数等，这些和大部分现代的程序设计语言相比概念相近但使用更为简洁，官方文档中的功能示范性示例如下（注释中针对各部分代码所表示的LESS语言特性说明）：

// Less中的变量声明
// 变量声明以@开头
// 注意，在less中可以使用运算符号对任何数字、颜色或者变量做运算
@import "library";
@width: 10px+2px-3px*2;
@height: @width+10px;

//Less中的变量使用和基本的嵌套用法
#header {
  width: @width;
  height: @height;
  color:orange;
  .navigation{
      font-size:12px;
  }
  .logo{
      width:300px;
  }
}
//为了和css标准保持一致，在calc()中的运算符并不会被计算
@var: 50vh/2;
#h3{
    width:calc(10px+@var+50%);
}

//Less中的混合Mixins,将一组属性从一个规则集混入另一个规则集
//如下片段中的.bordered分别在@menu a和.post a中使用了，也可以使用 #ids作为mixin
.bordered{
    border-top:dotted 1px black;
    border-bottom:solid 2px black;
}

#menu a{
    color:orange;
    .bordered();
}
.post a{
    color:red;
    .bordered();
}

//转义，使用 ~"string"形式的内容都会被直接转义
@min768: ~"(min-width:768px)";
.element{
    @media @min768{
        font-size: 1.2rem;
    }
}

//可以直接使用Less内置的函数来快速处理颜色、字符串等信息
//例如 percentage,saturate,lighten函数来将数字转换为百分数，调节颜色饱和度和亮度
@base:green;
@basewidth:0.5;

.class{
    width:percentage(@basewidth);
    color:saturation(@base,2%);
    background-color: spin(lighten(@base,1%),8);
}

//变量@varlib在另外一个文件library.less中定义，本文件中导入后可以直接使用
// @varlib:white;
.imports{
    width: @varlib;
}

#colors(){
    primary:blue;
    secondary:green;
}
.button{
    color:#colors[primary];
    border: 1px solid #colors[secondary];
}

针对上述LESS文件，进行编译后的CSS文件内容如下：

#header {
  width: 6px;
  height: 16px;
  color: orange;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#h3 {
  width: calc(10px+25vh+50%);
}
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: orange;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
@media (min-width:768px) {
  .element {
    font-size: 1.2rem;
  }
}
.class {
  width: 50%;
  color: 100%;
  background-color: #008512;
}
.imports {
  width: white;
}
.button {
  color: blue;
  border: 1px solid green;
}

由此可以看出LESS各部分功能对编辑CSS的价值主要体现在以下几个方面：

• 通过命名空间、模块和变量来定义一类参数，以方便修改和维护
• 通过内置函数和运算符等操作来简化CSS文件撰写过程中需要实现的基本功能
• 通过嵌套、混入等继承模式来使得CSS文件更为模块化，结构化

在最终生成的CSS文件中，LESS文件特有的函数、混入等功能都被编译成为标准的CSS文件，从而保持了语言的兼容性。

3. 在VS CODE中通过Grunt配置LESS自动化编译环境

在全局和项目中安装并配置Grunt和需要的插件方法如下：

npm install -g grunt-cli
npm install --save-dev grunt
npm install --save-dev grunt-contrib-less
npm install --save-dev grunt-contrib-watch

在项目根目录下新建 Gruntfile.js 文件并在其中写入类似如下内容:

module.exports = function (grunt) {

    grunt.initConfig({
        less: {
            development: {
                files: {
                    "./src/css/bootstrap.css": "./src/less/boostrap.less" 
                  //编译的目标文件：源文件
                }
            }
        },
        watch: {
            styles: {
                files: ['src/less/**/*.less'], //watch功能要监控的文件
                tasks: ['less'],
                options: {
                    nospawn: true
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['less', 'watch']);
};

这里借助 Grunt 的 watch 模块来监控 Less 文件夹下内容的变化，这里将 less 源文件放在 src/less 目录下而输出的 css 文件放在 src/css 目录下，需要注意， files 参数中前半部分为目标文件而后半部分为源文件。这样，在项目下运行 grunt 指令，系统就会自动监控less文件的编译并输出为相应的css文件。

4. 在线资源

• W3School
• 菜鸟教程
• LESS项目官网
• Gruntjs官网
• Grunt-contrib-less项目地址
• 使用Grunt编译Less文件参考文章（英文）