# css-preprocessor

**Repository Path**: hexunjian/css-preprocessor

## Basic Information

- **Project Name**: css-preprocessor
- **Description**: css 预处理语言的学习测试项目
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-05-10
- **Last Updated**: 2021-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### css 预处理器（css preprocessor）
我们学习和测试下面三个主流的css的预处理器
1. Sass(Scss):https://www.sass.hk/
2. Less:https://less.bootcss.com/
3. Stylus:https://stylus.bootcss.com/

#### 本项目通过使用vue和react分别对css预处理器进行学习测试

#### vue 版本

我们这里不考虑vue的版本问题，比如说有的人还在使用vue2.x ,有的人已经开始使用vue3.x，其实vue的版本的变化并不影响我们对 css 预处理器的测试使用，所以我们统一使用 vue-cli 进行项目结构的创建，当然你也可以自己搭建一个基本的项目结构，这些都不是问题，我们的重点还是 css 预处理器。 

1. 我们使用vue-cli之前需要先安装vue cli , 参考官方文档：https://cli.vuejs.org/zh/, 需要注意的是，cli 有两个不同的版本；
2. 老版本 cli 工具的安装使用：
   安装：npm install --global vue-cli
   使用：vue init webpack demo， demo是我们的项目的名称

3. 新版本 cli 工具的安装使用：
   安装：npm install @vue/cli -g
   使用：vue create demo  ， demo是我们的项目的名称 

4. 本项目通过 新版本进行项目基本结构的创建：

   (1) 创建基于 sass(scss) 的vue项目
      我们先进入到 vue 目录下，使用命令：vue create vue-sass 创建一个基于vue的 sass /scss 测试项目，
      安装完成按照提示进入 vue-sass 目录中，按照提示使用 yarn serve命令（或者 npm run serve 命令）进行项目的启动
      启动之后，访问：http://localhost:8080/ 即可进入默认的首页
      我们基于这个项目结构进行 sass/scss 的学习和测试;

   (2) 创建基于 less 的vue项目
      我们先进入到 vue 目录下，使用命令：vue create vue-less 创建一个基于vue的less测试项目，
      安装完成按照提示进入 vue-less目录中，按照提示使用 yarn serve命令（或者 npm run serve 命令）进行项目的启动
      启动之后，访问：http://localhost:8080/ 即可进入默认的首页
      我们基于这个项目结构进行 less 的学习和测试;
   
   (3) 创建基于 stylus 的vue项目
      我们先进入到 vue 目录下，使用命令：vue create vue-stylus 创建一个基于vue的stylus测试项目，
      安装完成按照提示进入 vue-stylus目录中，按照提示使用 yarn serve命令（或者 npm run serve 命令）进行项目的启动
      启动之后，访问：http://localhost:8080/ 即可进入默认的首页
      我们基于这个项目结构进行 stylus 的学习和测试;

在创建的基于sass的vue项目中使用sass
   vue-cli 支持在创建项目的时候选择 css 预处理器类型，但是我们创建项目的时候先不要添加，我们创建项目完成之后再来自己进行添加，帮助我们学习。
   首先下载两个包： sass 和 sass-loader
   npm install -D sass-loader sass
   下载完成即可，无需任何配置
   我们在任意一个vue文件中测试sass的使用，示例如下：
   <style lang="scss" scoped>
      .hello{
         border: 1px solid red;
      }
   </style>
   如果报错类似：Syntax Error: TypeError: this.getOptions is not a function，那么我们修改下sass-loader的版本即可，换一个版本；
   注意，使用lang="scss"， 不要使用 lang="sass";
   我们启动项目使用命令： npm run serve 即可访问;
   参考官网说明：https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8

在创建的基于less的vue项目中使用less
   vue-cli 支持在创建项目的时候选择 css 预处理器类型，但是我们创建项目的时候先不要添加，我们创建项目完成之后再来自己进行添加，帮助我们学习。
   首先下载两个包： less 和 less-loader
   npm install -D less-loader less
   下载完成即可，无需任何配置
   我们在任意一个vue文件中测试sass的使用，示例如下：
   <style lang="less" scoped>
      .hello{
         border: 1px solid red;
      }
   </style>
   如果报错类似：Syntax Error: TypeError: this.getOptions is not a function，那么我们修改下less-loader的版本即可，换一个版本尝试一下；
   注意，使用lang="less";
   我们启动项目使用命令： npm run serve 即可访问;
   参考官网说明：https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8

在创建的基于stylus的vue项目中使用stylus
   vue-cli 支持在创建项目的时候选择 css 预处理器类型，但是我们创建项目的时候先不要添加，我们创建项目完成之后再来自己进行添加，帮助我们学习。
   首先下载两个包： stylus 和 stylus-loader
   npm install -D stylus-loader stylus
   下载完成即可，无需任何配置
   我们在任意一个vue文件中测试sass的使用，示例如下：
   <style lang="stylus" scoped>
   .hello
      border: 1px solid red
   </style>
   如果报错,那么我们修改下stylus-loader的版本即可，换一个版本尝试一下；
   注意，使用lang="stylus";
   我们启动项目使用命令： npm run serve 即可访问;
   参考官网说明：https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8

#### react 版本
  
  我们这里不考虑react 的版本问题，和vue类似，版本的变化并不会影响我们对 css 预处理器的测试使用，所以我们使用 create-react-app 进行项目的基本结构的搭建。这个 create-react-app 和 vue的cli类似，可以帮助我们创建一个简单的项目目录结构；

   安装create-react-app：  npm install -g create-react-app

   (1) 创建基于 sass 的 react 项目
   我们先进入到 react 目录下，使用命令：create-react-app react-sass 创建一个基于react的 sass /scss 测试项目，
   安装完成按照提示进入 react-sass 目录中，按照提示使用 yarn start 命令（或者 npm run start 命令）进行项目的启动
   启动之后，访问：http://localhost:3000 即可进入默认的首页
   我们基于这个项目结构进行 sass/scss 的学习和测试;

   我们在已经创建好的react 项目中，安装 node-sass 依赖：npm install node-sass -D 即可
   我们把默认的 .css 文件后缀修改为 .scss 即可；
   如果关于编译报错，可能需要修改 node-sass 版本，默认安装的node-sass 都是最新的版本,可能会导致问题，我们可以降低一下版本即可；

   (2) 创建基于 less 的react项目
   我们先进入到 react 目录下，使用命令：create-react-app react-less 创建一个基于react的less测试项目，
   安装完成按照提示进入 react-less目录中，按照提示使用 yarn start 命令（或者 npm run start 命令）进行项目的启动
   启动之后，访问：http://localhost:3000 即可进入默认的首页
   我们基于这个项目结构进行 less 的学习和测试;
   
   (3) 创建基于 stylus 的react项目
   我们先进入到 react 目录下，使用命令：create-react-app react-stylus 创建一个基于react的stylus测试项目，
   安装完成按照提示进入 react-stylus目录中，按照提示使用 yarn start 命令（或者 npm run start 命令）进行项目的启动
   启动之后，访问：http://localhost:3000 即可进入默认的首页
   我们基于这个项目结构进行 stylus 的学习和测试;


在创建的基于sass的 react 项目中使用sass
基于create-react-app 的项目默认配置了 sass 文件的解析设置，我们下载一下 node-sass 依赖即可；
相应的 css文件命名为 .scss文件即可；


在创建的基于less的 react 项目中使用less
使用命令 npm run eject 释放配置文件，在 webpack.config.js 中增加相应 less 的配置
   
   const lessRegex = /\.less$/;
   const lessModuleRegex = /\.module\.less$/;
   
   {
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders(
         {
         importLoaders: 3,
         sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
         },
         'less-loader'
      ),
      sideEffects: true,
   },
   {
      test: lessModuleRegex,
      use: getStyleLoaders(
         {
         importLoaders: 3,
         sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
         modules: {
            getLocalIdent: getCSSModuleLocalIdent,
         },
         },
         'less-loader'
      ),
   },

   配置完成之后安装 less 和 less-loader 依赖，npm install less less-loader -D 即可；
   css文件命名为 .less格式文件，启动项目即可； 

在创建的基于stylus的 react 项目中使用stylus
使用命令 npm run eject 解放配置，设置 :
   // add stylus support
   { 
      test: /\.styl$/, 
      loaders: ['style-loader', 'css-loader', 'stylus-loader'], 
   },

   {
      loader: require.resolve('file-loader'),
      // Exclude `js` files to keep "css" loader working as it injects
      // its runtime that would otherwise be processed through "file" loader.
      // Also exclude `html` and `json` extensions so they get processed
      // by webpacks internal loaders.
      exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.styl$/],
      options: {
         name: 'static/media/[name].[hash:8].[ext]',
      },
   },

   安装依赖 ： npm install stylus stylus-loader -D , 如果使用过程中报错，尝试降低 stylus-loader 版本即可
   css文件命名为 .styl 格式文件即可;

#### 本级目录下的 vue 和 react 目录
我们创建了一个vue的目录（项目）用来测试 css 预处理器在 vue 下的使用；同时我们也创建了一个 react 目录，用来测试 css 预处理在 react 下的使用；实际上，我们在vue中和react中对css预处理器的使用是差不多的，没有什么区别;

#### Sass 使用说明
 1. 特性
  完全兼容 css3 这个特性很重要，使得我们不用担心兼容的问题，专注于开发即可
  在 css 的基础上增加了变量，嵌套，混合，函数，控制指令等功能
  自定义输出格式
 2. 语法格式
   sass 和 scss 都称之为 sass；
   sass的前期版本就是 sass ，后面进化到 scss ;
   sass 采用了缩进的方式替换了css的 { } , 并且省略了样式结尾的分号;
   但是 scss 又恢复了 {} 和结尾分号的形式；
   sass格式的文件以 .sass后缀为扩展名，scss格式的文件以 .scss 后缀为扩展名，所以一般情况下使用 scss 即可；
 3. 变量
    css是没有变量的概念和语法的，但是 sass 中提供了变量的支持；
    变量的声明：$highlight-color: #F90;
    sass 使用 $ 符号来标明变量；
    更多详细的内容我们在vue和react的案例中进行详细的说明补充，请查看 /react/react-sass    /vue/vue-sass

 7. 函数
 8. 混合
 9. 继承

#### less 使用说明
 1. 特性
    和 sass 类似，兼容css；
 2. 语法格式
    less采用的是非缩进方式，即使用 {} 和 分号的形式来书写，和sass非缩进的方式类似
    文件的格式以 .less 后缀为扩展名
 3. 变量
    css是没有变量的概念和语法的，但是 less 中提供了变量的支持；
    变量的声明：@highlight-color: #F90;
    less 使用 @ 符号来标明变量；
    更多详细的内容我们在vue和react的案例中进行详细的说明补充，请查看 /react/react-less    /vue/vue-less

 4. 嵌套
 5. 导入
 6. 注释
 7. 函数
 8. 混合
 9. 继承

#### stylus 使用说明
 1. 特性
    和 sass 类似，兼容css；
 2. 语法格式
    stylus 采用缩进和省略分号的形式书写，和sass缩进方式类似
    文件的格式以 .styl 后缀为扩展名
 3. 变量
    css是没有变量的概念和语法的，但是 stylus 中提供了变量的支持；
    变量的声明：highlight-color= #F90
    stylus 变量直接声明即可，不需要像 sass 需要使用$ 标识，不需要像 less 需要使用 @ 标识
    但是 stylus 也可以在变量前添加 $    如：$highlight-color= #F90
    更多详细的内容我们在vue和react的案例中进行详细的说明补充，请查看 /react/react-stylus    /vue/vue-stylus
 4. 嵌套
 5. 导入
 6. 注释
 7. 函数
 8. 混合
 9. 继承