tag scss

標籤
貢獻14
70
10:57 AM · Nov 04 ,2025
mingweiweim 頭像 zhiyandexia 頭像 iamguyu 頭像 u_16099246 頭像 heeroluo 頭像 kysou 頭像 humi 頭像 chencaize 頭像 shixinclearboth 頭像 panda_58e6e8c41c196 頭像 rk405264704 頭像 today_5aa33dd13dda9 頭像

@scss / 博客 RSS 訂閱

mingweiweim 頭像

明未為洺 - scss基礎語法的簡單使用

1. 變量聲明及使用 $color: red; .box { color: $color; } 2. mixin和include 2.1 簡單使用 $bgColor: red; @mixin bg { background: $bgColor; } .box { @include bg; } 編譯結果： .box { background: red; } 2.2 進

sass , scss , map , Css , for循環

收藏 評論

zhiyandexia 頭像

夏哥 - 夏哥事件薄 — VUE 使用 vue-loader 報錯及解決（在vue裏使用scss）

之前一直使用angular寫項目，css使用的是SCSS。 後來使用VUE寫CSS，寫習慣 SCSS 後總覺得不方便。但由於 VUE 本身不支持 SCSS 寫法，需要安裝vue-loader才能在 VUE 文件及樣式文件裏使用 SCSS 。於是有了這次記錄。 首先 官方的介紹文檔 介紹 | Vue Loader​vue-loader.vuejs.org npm install -D vue-l

vue-loader , vue.js , scss

收藏 評論

iamguyu 頭像

guyu - less&scss 常用 mixin&function集合

lessscss 常用 mixinfunction集合 scss mixin：返回樣式集合 定義：@mixin 變量名(參數) { 樣式 } 調用：@include 變量名(參數); mixin 基礎用法 // 單行文本溢出 @mixin oneRowOverflow { white-space: nowrap; overflow: hidden; text-

less , scss , mixin , function , 前端

收藏 評論

u_16099246 頭像

編程藝術家 - ESLint & StyleLint & CommitLint 前端規範化 學習筆記

Middleman中的代碼質量工具：ESLint與Stylelint集成 Middleman作為靜態網站生成工具，提供了靈活的前端開發環境。為確保代碼質量與風格一致性，集成ESLint（JavaScript代碼檢查工具）和Stylelint（CSS/SCSS代碼檢查工具）是關鍵步驟。本文將詳細介紹在Middleman項目中配置這兩款工具的完整流程，幫助開發團

scss , 雲計算 , 雲服務 , 代碼質量 , 規則集

收藏 評論

heeroluo 頭像

MrLuo - 品牌色功能迭代方案

最近產品經理希望在 B 端後台系統中增加品牌色功能，突顯客户的企業特色。從技術上説，整個流程是非常簡單的： 在配置中心為某個客户配置品牌色（十六進制顏色值）。 後台系統初始化時，通過後端接口讀取配置的品牌色。 把品牌色寫入為根元素的 CSS 變量。 核心流程代碼如下： const response = await fetch('/api/get-brand-info'); const d

scss , Css , 前端

收藏 評論

kysou 頭像

c3c8c016-283c-46df-852a-c654171a5045 - 使用scss製作按鈕變亮變暗效果

演示 正常狀態 鼠標懸浮狀態 點擊狀態 演示為第一個區域（紅色按鈕） front 在我們進行前端開發時，如果用純CSS實現這種鼠標懸浮時變深，點擊變淺很容易（:hover,:focus），但是數量一多，寫起來就非常噁心，所以我們可以用scss來完成這種效果。 scss-codes .all{ //通用屬性 width: 60px; he

scss

收藏 評論

humi 頭像

heruns - React Hook 和 SCSS 結合的響應式佈局方案

背景 公司中有多個項目需要同時開發 PC 端和 H5 端，大部分地方邏輯和交互比較類似，主要是樣式上有些區別。為了更好地複用代碼、提高開發效率，經過一段時間的實踐後，我們總結出這套 React Hook 和 SCSS 結合、px 和 vw 共存的響應式佈局方案。 基礎代碼 創建項目 首先，我們來創建一個項目，這裏我用的是 Create React App，選擇了 typescript 模板，通過以

響應式佈局 , react , scss , Css , hook

收藏 評論

chencaize 頭像

點墨 - VSCode 樣式格式化

在使用VSCode的插件進行less文件格式化的時候，發現會存在問題。 index.less @prefix: test; @{prefix}-input{ color :red; width : @base-with; height : @base-height; } @base-size : 10px; @base-with : @base-

less , vscode插件 , scss , visual-studio-code , Css

收藏 評論

shixinclearboth 頭像

ClearBoth - Vue3中使用.scss的全局變量

首先在assets/styles下新建一個.scss文件。 文件內容 $background-main:#222125; $background-sub:#2D2E32; $divider-color: #777777; $font-color:#ffffff; 在vue.config.js中添加以下代碼 css: { loaderOptions: { sass: {

scss

收藏 評論

mingweiweim 頭像

明未為洺 - scss 遍歷數組

each遍歷 $colors: ( #00D477, #F57933, #0052F5 ); @each $c in $colors { $i: index($colors, $c); .tag-#{$i} { background-color: $c; } } 生成的結果如下： .tag-1 { ba

sass , scss

收藏 評論

panda_58e6e8c41c196 頭像

UlaHalal - scss使用注意點

scss拓展寫法 .a { .b { :hover { width: 100px; } .c { width: 100px; } -d { width: 100px; font: {

scss

收藏 評論

rk405264704 頭像

留白 - 記錄動態修改element中el-calendar日曆組件日期的高度

首先看下需求頁面的整體佈局。 頁面分為上下佈局，上邊模塊包含左側日曆和右側導入部分，下邊模塊是數據狀態部分。日曆和導入組件固定高度420px;日曆寬度500px;數據狀態寬度100%，高度自適應。 項目是由vue2+elementui開發，這裏主要説的是日曆的高度如何動態設置？ 由於業務需求，日曆只展示當前月份數據，使用css將上個月份和下個月份數據進行隱藏，所以日曆有時是5行數據展示，有

vue.js , scss , element-ui , Javascript

收藏 評論

today_5aa33dd13dda9 頭像

today - scss 媒介查詢 mixin

使用 scss 的變量，集合和 mixin ，定義mixin 函數，輕鬆處理媒介查詢 源碼 // 定義 map 和 mixin $breakpoints: ( 'phone': (320px, 480px), 'pad': (481px, 768px), 'laptop': (769px, 1920px), 'desktop': (1921, 3440px), 'tv': 34

scss , Css , 前端

收藏 評論

1227 頭像

1227 - 一文搞定前端多種主題配置及全局引入scss文件

前言 本文中所採取的方案主要是css預處理（less/scss）方案，適用於項目中有多套主題需要進行配置，有着很強的擴展性和易用性，如果你的項目臨時需要加上主題切換，可以採用；如果你的項目需要很多套主題配置，也非常適用！ 一、變量配置的代碼部分 1、主題變量的配置 theme.scss（在項目中存放在style文件夾下面，這個文件夾主要用於系統一些公共樣式的存放和管理） // 主題配置 $the

vue.js , scss , 工程化 , 前端

收藏 評論

xishui_5ac9a340a5484 頭像

夕水 - SCSS即將廢棄`@import`，以前的`@import`該何去何從？

SCSS即將廢棄@import，以前的@import該何去何從？ 1. 引言 隨着前端開發技術的不斷髮展，SCSS（Sass）作為一種流行的CSS預處理器，已經在眾多前端項目中得到了廣泛應用。其優雅的語法、強大的功能以及靈活的模塊化機制，使得開發者能夠更加高效地構建和管理樣式表。然而，隨着SCSS的不斷迭代更新，我們也迎來了一個重要的變革：@import語法即將被廢棄。雖然@import曾經是SC

scss , 前端

收藏 評論