CSS - 分类 - 菠菜眾長https://lruihao.cn/categories/css/CSS - 分类 - 菠菜眾長Hugo -- gohugo.iozh-CN1024@lruihao.cn (Lruihao)1024@lruihao.cn (Lruihao)Sat, 03 Jun 2023 17:38:44 +0800Vue2 + tailwindcss 初始化https://lruihao.cn/posts/v2-tailwind/Sat, 03 Jun 2023 17:38:44 +0800Lruihaohttps://lruihao.cn/posts/v2-tailwind/新建 Vue2 项目

通过 vue-cli 创建一个叫 v2-tailwind 的项目：

1

vue create vue2-tailwind

根据需要选择其他的功能插件，例如：Babel, Router, Vuex, CSS Pre-processors, Linter。

关于 ESLint 当在 Vue 创建项目时，你可以根据自己的需求选择不同的 ESLint 配置。以下是一些常见的选项及其优缺点和注意事项：

  1. ESLint with error prevention only:

    • 优点：这个配置只会帮助你防止代码中的错误，它的规则相对宽松。适用于刚开始使用 ESLint 或者希望避免太多约束的开发者。
    • 缺点：由于规则相对宽松，可能无法完全确保代码风格的一致性。
    • 注意事项：如果你想要更严格的代码检查，可以考虑其他配置。

  2. ESLint + Airbnb config:

    • 优点：Airbnb 的配置非常严格，能够帮助你遵循最佳实践和编写高质量的代码。此外，它也包含了许多 ES6+ 的规则。
    • 缺点：由于其严格性，初学者可能需要花费更多时间来解决 ESLint 报告的问题。
    • 注意事项：在使用此配置时，请确保你理解并接受 Airbnb 的代码规范。

  3. ESLint + Standard config:

    • 优点：Standard 的配置旨在提供一个相对简单、一致的代码风格，适合那些喜欢“零配置”的开发者。
    • 缺点：这个配置可能不适用于所有项目，因为它有自己的代码风格要求。
    • 注意事项：如果你的团队或项目已经有自己的编码规范，使用 Standard 配置可能会导致不一致。

  4. ESLint + Prettier:

    • 优点：Prettier 是一个自动格式化工具，可以与 ESLint 结合使用，以确保代码风格的一致性。这可以提高代码可读性，并减少在代码审查过程中关注格式问题的时间。
    • 缺点：Prettier 可能会覆盖某些 ESLint 规则，所以需要花一些时间确保配置正确。
    • 注意事项：为了避免冲突，请确保 ESLint 和 Prettier 的规则正确配置。

总之，在选择 ESLint 配置时，需要根据你的团队、项目需求和个人偏好来权衡。选择适当的配置可以帮助你提高代码质量并保持一致的代码风格。

安装 tailwindcss

打开项目，安装 tailwindcss：

1
2
3

cd vue2-tailwind
# 安装 tailwindcss 低版本及相关插件
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

然后创建配置文件：

1
2

# 创建 postcss.config.js, tailwind.config.js
npx tailwindcss init -p
1
2
3
4
5
6

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

module.exports = {
  purge: [
    "./src/App.vue",
    "./src/views/**/*.{vue,js,ts,jsx,tsx}",
    "./src/components/**/*.{vue,js,ts,jsx,tsx}",
  ],
  darkMode: 'class', // or 'media' or 'class'
  mode: 'jit', // 是否开启 jit 模式，开启以后编译会更快，当然，tailwindcss 版本需要在 2.1 以上
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

最后在 main.js 中引入 tailwindcss

1

import "tailwindcss/tailwind.css"

启动项目

启动项目，修改模板中的 class 进行测试。

1

npm run serve
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<template>
  <div id="app">
    <div class="bg-gray-100">
      <div class="container mx-auto">
        <div class="flex justify-center items-center h-screen">
          <div class="text-4xl text-gray-700">Hello Vue2 + tailwindcss</div>
        </div>
      </div>
    </div>
  </div>
</template>
]]>关于 CSS 和 Scss 变量运算那些事https://lruihao.cn/posts/css-scss-var/Sat, 30 Apr 2022 22:04:29 +0800Lruihaohttps://lruihao.cn/posts/css-scss-var/问题分析

昨天在开发 FixIt 的时候，在 Scss 中写 max(foo, bar) 函数比较不同的单位变量时报错了，但是在 CSS 中使用 max 或者 min 函数函数比较不同的单位变量是没有问题的。

造成这一问题的原因是，在 Scss 中，也实现了 max 和 min 函数，但是在 Scss 中，不同单位的变量是不能进行运算的，所以使得在 Scss 中直接使用 max 或者 min 函数会提示单位不同的报错。（同类 Less 中的变量运算是支持不同单位的）

知道造成问题的原因后，解决这个问题就很简单了，有很多种方法，有些方法感觉像在卡 BUG，有点意思，记录一下。

奇思淫技

  1. 由于 Scss 区分大小写而 CSS 不区分，所以为了不让 Scss 中的函数覆盖 CSS 的函数，我们可以使用除了 max 以外的 23 - 1 种写法，这样就能使用原生 CSS 的 max 函数来比较了，就不会报错了。

    1
2
3

    .foo {
  padding-left: MAX(10vh, 3.5rem);
}

  2. 使用 Scss 没有的 CSS 函数 clamp:

    clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))

    1
2
3

    .foo {
  padding-left: clamp($header-height, 10vh, 10vh);
}

  3. 使用 unquote($string) 函数让 Scss 删除字符串最前和最后的单引号或双引号

    1
2
3

    .foo {
  padding-left: unquote('max(10vh, #{$header-height})');
}

By the way

如果需要在 CSS 函数内部恢复 Scss 解析（引用 Scss 变量），只需用 #{...} 包围 Scss 代码。

1
2
3
4
5

$header-height: 3.5rem !default;

.foo {
  margin: calc(10vh - $header-height);
}

上面的 Scss 将解析成 以下无效的 CSS 代码：

1
2
3

.foo {
  margin: calc(10vh - $header-height);
}

用 #{...} 包围 Scss 变量

1
2
3
4
5

$header-height: 3.5rem !default;

.foo {
  margin: calc(10vh - #{$header-height});
}
]]>less&sass&scsshttps://lruihao.cn/posts/less-sass-scss/Tue, 22 Jun 2021 16:39:47 +0000Lruihaohttps://lruihao.cn/posts/less-sass-scss/

Sass 和 Less 都屬於 CSS 前置處理器，CSS 前置處理器定義了一種新的語言，其基本思想是，用一種專門的程式設計語言，為 CSS 增加了一些程式設計的特性，將 CSS 作為目標生成檔，然後開發者就只要使用這種語言進行 CSS 的編碼工作。
轉化成通俗易懂的話來說就是 “用一種專門的程式設計語言，進行 Web 頁面樣式設計，再通過編譯器轉化為正常的 CSS 檔，以供專案使用”。

為什麼，什麼時候要使用 CSS 前置處理器？ (Why, When)

CSS 有具體以下幾個缺點：

  • 語法不夠強大，比如無法嵌套書寫，導致模組化開發中需要書寫很多重複的選擇器
  • 沒有變數和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導致難以維護

這就導致了我們在工作中無端增加了許多工作量。而使用 CSS 前置處理器可大大提高了我們的開發效率：

  • 提供 CSS 缺失的樣式層複用機制
  • 減少冗餘碼
  • 提高樣式代碼的可維護性。

但是，CSS 的好處在於簡便、隨時隨地被使用和調試。這就使得預編譯 CSS 步驟的加入具有以下缺點：

  • 開發工作流中多了一個環節，調試也變得更麻煩
  • 預編譯很容易造成後代選擇器的濫用

所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，CSS 前置處理器有沒有解決更大的麻煩。

  • 系統級框架開發 （大型複雜的樣式設計）
  • 持續維護

Less、Sass/Scss 是什麼？ (What)

Less

是一種動態樣式語言。對 CSS 賦予了動態語言的特性，如變數、繼承、運算、函數。
Less 既可以在用戶端上運行 （支援 IE 6+, Webkit, Firefox)，也可在服務端運行。

Sass

是一種動態樣式語言，Sass 語法屬於縮排語法，
比 CSS 比多出好些功能（如變數、嵌套、運算，混入 (Mixin)、繼承、顏色處理，函數等），更容易閱讀。

Sass 與 Scss 的關係

Sass 的縮排語法，對於寫慣 CSS 的前端開發者來說很不直觀，也不能將 CSS 代碼加入到 Sass 裡面，因此 Sass 語法進行了改良，Sass 3 就變成了 Scss(Sassy CSS)。與原來的語法相容，只是用{}取代了原來的縮進。Sass 相當於 Scss 的嚴格模式。

Sass 和 Less 的比較

相同點

Less 和 Sass 在語法上有些共性，比如下面這些：

  1. 混入 (Mixins)——class 中的 class
  2. 參數混入——可以傳遞參數的 class，就像函數一樣
  3. 嵌套規則——Class 中嵌套 class，從而減少重複的代碼
  4. 運算——CSS 中用上數學
  5. 顏色功能——可以編輯顏色
  6. 名字空間 (namespace)——分組樣式，從而可以被調用
  7. 作用域——局部修改樣式
  8. JavaScript 賦值——在 CSS 中使用 JavaScript 運算式賦值

不同點

  1. 實現方式
  • Less 是基於 JavaScript，是在用戶端處理的
  • Sass 是基於 Ruby 的，是在伺服器端處理的
  1. 關於變數在 Less 和 Sass 中的唯一區別就是 Less 用@，Sass 用$
  2. less 中的變量運算可帶、可不帶單位，Sass 需要帶單位元
  3. 語法不同，請詳見 Less、Sass 官網

選用 Less 還是 Sass ?

無論是學習資料，討論情況，以及項目使用情況 Sass/Scss 都優於 Less，比如 Bootstrap 4 就使用的 Sass, 但是 Less 的使用更加簡單，使用門檻也較低，內網開發的情況，Less 則更加適合。

]]>