關於 sass 的安裝使用和介紹

時間 2019-11-17

標籤關於 sass 安裝使用介紹简体版

原文原文鏈接

關於 sass 的安裝使用和介紹

相信不少人在寫了大量的 css 代碼以後,要是沒有統一的風格去編寫的話,在維護起來是一件多麼痛苦的是事情,不少小夥伴已經知道了 css 的預處理語言,我也很少說了,畢竟仍是一個學習的人.css

經常使用的 css 預處理語言有 scss sass less stylus,我用的多的就是 sass 和 less 了,下面就來介紹一下sass. 首先咱們想要使用 sass 的話就必須安裝相應的環境和插件啦.html

1. 安裝相應的環境

先去他們的中文檔去看下教程(sass中文網), 會讓安裝一個ruby的東西(官網喲Ruby官網),咱們選擇一個適合本身版本便可node

,我下載的是這個,而後接下來傻瓜式安裝便可,也能夠本身選擇安裝的目錄,安裝成功以後,咱們能夠進入到命令行進行查看,

ruby -v //就能夠查看版本啦
複製代碼

接下來咱們開始安裝 sass

gem install sass
複製代碼

等待它安裝成功就好了,由於我已經安裝過了,提示的不用重複安裝.去看看咱們是否安裝成功

sass -v
複製代碼

出來這個頁面就說明咱們安裝成功了npm

咱們接下來還要安裝一個東西 Compass 和咱們的sass安裝很類似

gem install compass
compass -v
複製代碼

而後等待安裝成功便可,若是出來了這個頁面就說明安裝成功了,json

接下來咱們就可以使用咱們的sass啦瀏覽器

2. 在咱們的案例中使用 sass

咱們打開咱們的 vscode 安裝要用到的插件sass

第一個ruby

在插件庫中搜索 Beautify css/sass/scss/less 這個就能夠點擊安裝 bash

第二個搜索這個 Live Sass Compiler,點擊安裝

而後咱們就能夠建立咱們的案例啦

新見兩個文件less

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div>
        <p>
            我是一段紅色的文字<br>
        </p>
        <span>我是單獨的顏色</span>
    </div>
</body>
</html>
複製代碼

$gray: #aaa;
$red: red;
$span: green;
html,body {
    margin: 0;
}

div {
    border: 1px solid $gray;
    padding: 20px;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    margin-top: 100px;
    &>p {
        color: $red;
    }
    span {
        color: $span;
    }
}
複製代碼

而後點擊

能夠看到咱們的文件中多了兩個文件,

這兩個文件是通過編譯以後的文件

而後在瀏覽器中打開咱們的案例就能夠看到咱們寫的css代碼啦

咱們想要指定sass編譯後的位置怎麼辦,在 VSCode 菜單欄依次點擊「文件首選項設置」，打開 settings.json 全局配置文件。修改這個地方

"liveSassCompile.settings.formats": [
    {
        "format": "expanded" ,
        "extensionName": " .css",
        "savePath": "~/../css/"
    }
J

複製代碼

這樣就指定了編譯後的位置了

咱們想在咱們的項目中運行也能夠直接經過 yarn 或者 npm 安裝依賴包便可, 安裝命令以下

npm i sass-loader node-sass -D
複製代碼

在 style 標籤中寫上這個便可

<style lang="scss"></style>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。