使用scss製作按鈕變亮變暗效果
演示 正常狀態 鼠標懸浮狀態 點擊狀態 演示為第一個區域（紅色按鈕） front 在我們進行前端開發時，如果用純CSS實現這種鼠標懸浮時變深，點擊變淺很容易（:hover,:focus），但是數量一多，寫起來就非常噁心，所以我們可以用scss來完成這種效果。 scss-codes .all{ //通用屬性 width: 60px; he
昵稱 c3c8c016-283c-46df-852a-c654171a5045
@scss
貢獻者10
粉絲0
@scss
動態 列表
React Hook 和 SCSS 結合的響應式佈局方案
背景 公司中有多個項目需要同時開發 PC 端和 H5 端，大部分地方邏輯和交互比較類似，主要是樣式上有些區別。為了更好地複用代碼、提高開發效率，經過一段時間的實踐後，我們總結出這套 React Hook 和 SCSS 結合、px 和 vw 共存的響應式佈局方案。 基礎代碼 創建項目 首先，我們來創建一個項目，這裏我用的是 Create React App，選擇了 typescript 模板，通過以
昵稱 heruns
Vue3中使用.scss的全局變量
首先在assets/styles下新建一個.scss文件。 文件內容 $background-main:#222125; $background-sub:#2D2E32; $divider-color: #777777; $font-color:#ffffff; 在vue.config.js中添加以下代碼 css: { loaderOptions: { sass: {
昵稱 ClearBoth
scss 遍歷數組
each遍歷 $colors: ( #00D477, #F57933, #0052F5 ); @each $c in $colors { $i: index($colors, $c); .tag-#{$i} { background-color: $c; } } 生成的結果如下： .tag-1 { ba
昵稱 明未為洺
scss使用注意點
scss拓展寫法 .a { .b { :hover { width: 100px; } .c { width: 100px; } -d { width: 100px; font: {
昵稱 UlaHalal
記錄動態修改element中el-calendar日曆組件日期的高度
首先看下需求頁面的整體佈局。 頁面分為上下佈局，上邊模塊包含左側日曆和右側導入部分，下邊模塊是數據狀態部分。日曆和導入組件固定高度420px;日曆寬度500px;數據狀態寬度100%，高度自適應。 項目是由vue2+elementui開發，這裏主要説的是日曆的高度如何動態設置？ 由於業務需求，日曆只展示當前月份數據，使用css將上個月份和下個月份數據進行隱藏，所以日曆有時是5行數據展示，有
昵稱 留白
scss 媒介查詢 mixin
使用 scss 的變量，集合和 mixin ，定義mixin 函數，輕鬆處理媒介查詢 源碼 // 定義 map 和 mixin $breakpoints: ( 'phone': (320px, 480px), 'pad': (481px, 768px), 'laptop': (769px, 1920px), 'desktop': (1921, 3440px), 'tv': 34
昵稱 today
一文搞定前端多種主題配置及全局引入scss文件
前言 本文中所採取的方案主要是css預處理（less/scss）方案，適用於項目中有多套主題需要進行配置，有着很強的擴展性和易用性，如果你的項目臨時需要加上主題切換，可以採用；如果你的項目需要很多套主題配置，也非常適用！ 一、變量配置的代碼部分 1、主題變量的配置 theme.scss（在項目中存放在style文件夾下面，這個文件夾主要用於系統一些公共樣式的存放和管理） // 主題配置 $the
昵稱 1227
SCSS即將廢棄`@import`，以前的`@import`該何去何從？
SCSS即將廢棄@import，以前的@import該何去何從？ 1. 引言 隨着前端開發技術的不斷髮展，SCSS（Sass）作為一種流行的CSS預處理器，已經在眾多前端項目中得到了廣泛應用。其優雅的語法、強大的功能以及靈活的模塊化機制，使得開發者能夠更加高效地構建和管理樣式表。然而，隨着SCSS的不斷迭代更新，我們也迎來了一個重要的變革：@import語法即將被廢棄。雖然@import曾經是SC
昵稱 夕水
VSCode 樣式格式化
在使用VSCode的插件進行less文件格式化的時候，發現會存在問題。 index.less @prefix: test; @{prefix}-input{ color :red; width : @base-with; height : @base-height; } @base-size : 10px; @base-with : @base-
昵稱 點墨