• 技术文章 >web前端 >前端问答

    vue创建项目时sass是什么意思

    长期闲置长期闲置2022-06-21 10:33:56原创149

    vue创建项目时使用的sass是强化css辅助工具的意思,是对css的扩展;sass是由buby语言编写的一款css预处理语言,和html有一样严格的缩进风格,和css编写规范相比是不使用花括号和分号的。

    本教程操作环境:windows10系统、Vue3版、Dell G3电脑。

    vue创建项目时sass是什么意思

    Sass (Syntactically Awesome StyleSheets),是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格,和css编写规范有着很大的出入,是不使用花括号和分号的,所以不被广为接受。

    Sass 是一款强化 CSS 的辅助工具,是对 CSS 的扩展,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目, 其后缀是.sass。

    // deom.sass
    #sidebar
      width: 30%
      background-color: #faa

    扩展知识:

    vue-cli3提供了两种方式集成sass/scss

    方法一:创建vue项目时选择预处理器sass

    使用vue-cli3创建vue项目

    Vue CLI v4.5.15
    ? Please pick a preset:
      Default ([Vue 2] babel, eslint)
      Default (Vue 3) ([Vue 3] babel, eslint) 
    > Manually select features

    移动上下键选择Manually select features,表示手动选择创建项目的配置。

    按enter键,进入下一步操作,显示如下:

    ? Check the features needed for your project: 
     (*) Choose Vue version
     (*) Babel
     ( ) TypeScript
     ( ) Progressive Web App (PWA) Support        
     (*) Router
     (*) Vuex
    >(*) CSS Pre-processors
     (*) Linter / Formatter
     ( ) Unit Testing
     ( ) E2E Testing

    移动上下键在CSS Pre-processors处点击空格键以选中,表示需要css预处理工具。

    之后再进行css预处理工具操作,显示如下:

    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
      Sass/SCSS (with dart-sass)
    > Sass/SCSS (with node-sass)
      Less
      Stylus

    选择Sass/SCSS (with node-sass)作为我们的CSS预处理器。

    完成后项目会帮我们自动安装sass-loader 以及 node-sass依赖。

    方法二:手动安装

    如果在创建项目没有选择CSS 预处理器,我们也可以手动安装sass-loader以及 node-sass来集成scss

    npm install -D sass-loader node-sass

    使用sass

    至此我们只需要在style指定lang为scss即可:

    <style>
    $color = red;
    </style>

    vue service clie会自动使用我们安装的sass-loader作为scss内容的加载器。

    【相关推荐:《vue.js教程》】

    以上就是vue创建项目时sass是什么意思的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:SASS Vue
    上一篇:css3的盒子模型有什么用 下一篇:vue的插件是什么
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 什么是自定义指令?深入了解Vue中的自定义指令• 9个提高开发效率和性能的Vue小技巧• 手把手带你利用vue3.x绘制流程图• Vue指令入门之聊聊六大常用内置指令• vue和jquery用什么语言
    1/1

    PHP中文网