Flexbox Grid Mixins
Dart Sass @use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; $default-grid-gutter: 2%; .grid { @include flexbox-grid-mixins.grid($gutter: $default-grid-gutter); > .grid__col-3 { @include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter); } > .grid__col-9 { @include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter); } } LibSass @import 'node
ä¿å˜ã—ã¦ãŠãã¨ä¾¿åˆ©ï¼CSS Flexboxã§ã‚ˆã使用ã™ã‚‹ã‚³ãƒ¼ãƒ‰ãŒã¾ã¨ã‚られãŸCSSã®ã‚¹ãƒ‹ãƒšãƒƒãƒˆé›† | コリス
ヘッダã§ãƒã‚´ã‚’左寄ã›ã«ã—ãŸã‚Šã€æ¤œç´¢çª“ã‚’å³å¯„ã›ã«ã—ãŸã‚Šã€ç”»åƒã‚’ページã®ä¸å¤®ã«é…ç½®ã—ãŸã‚Šã€ãƒšãƒ¼ã‚¸ä¸Šã®ã‚らゆるè¦ç´ ã‚’æƒãˆæ•´åˆ—ã•ã›ã‚‹Flexboxをベースã«ã—ãŸã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ã‚¹ãƒ‹ãƒšãƒƒãƒˆã‚’紹介ã—ã¾ã™ã€‚ サイトやブãƒã‚°ã®å…¨ä½“ã§åˆ©ç”¨ã§ãるユーティリティã®classã¨ã—ã¦ã€ä¿å˜ã—ã¦ãŠãã¨ä¾¿åˆ©ãªã‚¹ãƒ‹ãƒšãƒƒãƒˆé›†ã§ã™ã€‚ Speed up alignment in CSS with Flexbox utility classes by CodyHouse 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ CSSã§é¢å€’ãªã®ã¯è¦ç´ を整列ã•ã›ã‚‹ã“㨠Flexboxä»¥å‰ Flexboxã§ç°¡å˜ã« CSSã§é¢å€’ãªã®ã¯è¦ç´ を整列ã•ã›ã‚‹ã“㨠CSSã§é¢å€’ãªã®ã¯ã€è¦ç´ を整列ã•ã›ã‚‹ã“ã¨ã§ã—ãŸã€‚ã—ã‹ã—ã€FlexboxãŒç™»å ´ã—ã¦ã€ç†ã«ã‹ãªã£ãŸæ–¹æ³•ã§æ•´åˆ—ã•ã›ã‚‹ã“ã¨ãŒå¯èƒ½ã«ãªã‚Šã¾ã—
一番詳ã—ã„CSSè¨è¨ˆè¦å‰‡BEMã®ãƒžãƒ‹ãƒ¥ã‚¢ãƒ« - Qiita
一番詳ã—ã„(当社比) ã“ã®è¨˜äº‹ã¯ 大体1å¹´ãらã„BEMを実践ã—ãŸä¸ã§æºœã¾ã£ãŸçŸ¥è¦‹çš„ãªã‚‚ã®ã‚’ルール･è¦å‰‡ï½¥æ³¨æ„点をã¾ã¨ã‚ãŸãƒžãƒ‹ãƒ¥ã‚¢ãƒ«ã¨ã„ã†ã‹ãŸã¡ã«ã—ãŸã‚‚ã®. BEMåˆå¿ƒè€…ã§ã‚‚ã™ã実践ã—ã¦ã‚‚らãˆãã†ãªæ„Ÿã˜ã«è©³ã—ãã—ãŸã¤ã‚‚ã‚Š. ã¡ãªã¿ã«BEMã®å®Ÿè·µã¨ã„ã†ã®ã¯Rails製Webアプリã§ã®å®Ÿè·µ. ※注 多分ã«æˆ‘æµãªéƒ¨åˆ†ã‚‚å«ã¾ã‚Œã¦ã„ã‚‹. ã“ã®è¨˜äº‹ã®å…¨ã¦ã‚’真似ã—よã†ã¨ã›ãšã«ä¸€éƒ¨ã®ã‚¨ãƒƒã‚»ãƒ³ã‚¹ã®ã¿å–り入れるã®ã‚‚ã„ã„ã‹ã‚‚ã—ã‚Œãªã„. BEMã¨ã¯ Block Element Modifierã®ç•¥ã§, Block => ã§ã‹ã„括り Element => ã§ã‹ã„括りã®ä¸ã«ã„ã‚‹è¦ç´ Modifier => 上記2ã¤ã®å¤‰åŒ–çƒ ã®3ã¤ã«åˆ†ã‘ã¦è€ƒãˆã¦ã„ãã“ã¨ã§CSSã‚’è¨è¨ˆï½¥å‘½åã—ã¦ã„ã手法. 基本的ãªè€ƒãˆã¨ã‹å‰æã¨ã‹ BEMã®ä¸ã§ã‚‚特ã«MindBEMdingã¨å‘¼ã°ã‚Œã¦ã„る命å法をベースã¨ã—ã¦ã„ã‚‹ SCSSを使用ã™ã‚‹ 基本的ã«
gulpã§ã‚µã‚¤ãƒˆå†…ã®scssã‚’åŒéšŽå±¤ã®cssã«ãã‚Œãžã‚Œæ›¸ã出ã™ï½œãƒ„ーブãƒãƒƒã‚«
/** * sass compile setting * scss/ディレクトリã®scssをコンパイルã™ã‚‹ */ gulp.task(‘sass’ , function(){ return sass( dir.top + `/ã€common/scss/ãªã©ã€ç‰¹å®šã®ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªã‚’ã„ã¡ã„ã¡æ›¸ã】/*.scss` , { compass : true, style: ‘expanded’ }) .pipe(autoprefixer()) .pipe(csscomb()) .pipe(plumber({ errorHandler : notify.onError(‘<%= error.message %>’) //gulp notify エラーメッセージ })) .pipe(gulp.dest( dir.top + ‘/ã€/common/css/ãªã©ã€æ›¸ã出ã—先をã„ã¡ã„ã¡æ›¸ã】’));
ç´°ã‹ã™ãŽã‚‹ã‘ã©ä¼ã‚ã£ã¦ã»ã—ã„ç§çš„BEMプラクティス30（ãらã„）
BEMã®ã„ã„ã¨ã“ã‚ã¯ã€ãã‚ŒãŒä½•è€…ãªã®ã‹ãŒæ˜Žç™½ã¨ã„ã†ã“ã¨ã«å°½ãる。ã¨ã‚ã‚‹è¦ç´ を見ãŸã¨ãã«ã€ãã®ã‚¹ã‚¿ã‚¤ãƒ«ãŒã©ã“ã«æ›¸ã‹ã‚Œã¦ã„ã‚‹ã®ã‹ã€ä½•ã‚’表ã—ã¦ã„ã‚‹ã®ã‹ãŒã‚¯ãƒ©ã‚¹åを見れã°ã‚ã‹ã‚‹ã€‚手を入れる際もã€ã©ã“ã«è¿½è¨˜ã™ã‚Œã°ã‚ˆã„ã®ã‹ã€ã©ã‚Œãらã„ã®å½±éŸ¿ã‚’åŠã¼ã™ã®ã‹ã®å¤§éƒ¨åˆ†ãŒæŽ¨æ¸¬ã§ãる。 レスãƒãƒ³ã‚·ãƒ–・デザインã¨ç›¸æ€§ãŒã„ã„ã¨ã‹ã€æµè¡Œã‚Šã®ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆæŒ‡å‘ã¨ç›¸æ€§ãŒã„ã„ãªã©ã€BEMã®è‰¯ã•ã¯ä»–ã«ã‚‚ã„ãã¤ã‹æŒ™ã’られるã‘ã©ã€æ±ºå®šçš„ãªã®ã¯æ˜Žçžã•ã§ã‚ã‚‹ã¨æ€ã†ã€‚ BEMを使ã„ã¯ã˜ã‚ã¦ã‹ã‚Œã“れ３，４年ãらã„経ã£ãŸã€‚ãã®é–“ã«è‰²ã€…ãªå‘½åè¦å‰‡ã‚„è¨è¨ˆæ€æƒ³ãŒç™»å ´ã—ã¦ããŸã‘ã‚Œã©ã‚‚ã€ä»Šã®ã¨ã“ã‚ã¯æµ®æ°—ã™ã‚‹ç¨‹ã®é…力を他ã«æ„Ÿã˜ã‚‹ã“ã¨ã‚‚ãªãBEM一ç‹ã§ã‚„ã£ã¦ãã¦ã„る。ãŸã ã—実践ã™ã‚‹ã«ã¤ã‘ã¦ã€ã‚ˆã‚Šæ˜Žçžã§ç ´ç¶»ã—ã¥ã‚‰ã„è¨è¨ˆã‚’実ç¾ã™ã‚‹ãŸã‚ã«ã€æ§˜ã€…ãªåˆ¶ç´„やガイドをè¨ã‘ã¦ã‚„ã£ã¦ããŸã®ã§ã€ã€Œã‚‚ã¨ã‚‚ã¨ã®BEMã€ã‹ã‚‰ã¯å¤šå°‘ãªã‚Šé›¢ã‚Œã¦ã„ã‚‹ã‹ã‚‚ã—ã‚Œãªã„。 ãŸã ã—ã€ãã‚Œã¯BEM
Sassã§@mixinを作る時ã«çŸ¥ã£ã¦ãŠããŸã„åŸºç¤ŽçŸ¥è˜ - Qiita
ã¯ã˜ã‚ã« Sassã®**@mixin**ã¯ãƒ¡ãƒ³ãƒ†ãƒŠãƒ–ルãªCSSè¨è¨ˆã«ã‚‚役立ã¤å¼·åŠ›ãªæ©Ÿèƒ½ã§ã™ã€‚ 一方ã§ã‚†ã‚‹ãも書ã‘ã¦ã—ã¾ã†ãŸã‚ã€æ°—ã‚’ã¤ã‘ãªã„ã¨ä¸æ ¼å¥½ãªCSSãŒç°¡å˜ã«å‡ºåŠ›ã•ã‚Œã¦ã—ã¾ã„ã¾ã™ã€‚ ãã“ã§@mixinを自作ã™ã‚‹ã«ã‚ãŸã£ã¦ã€çŸ¥ã£ã¦ãŠããŸã„（ãŠããŸã‹ã£ãŸï¼‰åŸºæœ¬çŸ¥è˜ã‚’ã¾ã¨ã‚ã¾ã—ãŸã€‚何ã‹ã®å‚考ã«ã§ã‚‚ãªã‚Œã°å¹¸ã„ã§ã™ã€‚ å‰ææ¡ä»¶ ソースコードã¯**.scss**å½¢å¼ã§è¨˜è¿°ã—ã¦ã„ã¾ã™ Sass 3.4.4ã§å‹•ä½œã‚’確èªã—ã¦ã„ã¾ã™ 使用ã—ã¦ã„ã‚‹Modifierã¨ã„ã†å˜èªžã¯ä»¥ä¸‹ã®é€šã‚Šã§ã™ BEMã¨å‘¼ã°ã‚Œã‚‹å‘½åè¦å‰‡ã§ä½¿ã‚れるã€åŸºæœ¬çš„ãªã‚¹ã‚¿ã‚¤ãƒ«ï¼ˆã‚»ãƒ¬ã‚¯ã‚¿ãƒ»class）ã«è¿½åŠ ã™ã‚‹å½¢ã§è£…飾を調整ã™ã‚‹classã®ã“㨠目次 @mixinã®ãŠã•ã‚‰ã„ 基本的ãªä½¿ã„æ–¹ @contentã®ä½¿ã„æ–¹ Modifierã«ç„¡é§„ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚’é©ç”¨ã•ã›ãŸããªã„... @contentを使ã£ã¦ã¿ã‚‹ 制御用ã®å¼•æ•°ã‚’用æ„ã—ã¦ã¿ã‚‹ 引数ã«é…列（
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
css2scss - from css to scss
{{#tags}}- {{label}}
{{/tags}}