목록CSS/Bootstrap (6)

어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ

[Bootstrap] SCSS 변수 찾기, rfs() 가 뭔가?

이 코드를 📁 node_modules/bootstrap/scss/_type.scss 에서 찾았는데해당 $font-size라는 변수명이 node_modules/bootstrap/scss/_variables.scss에 없당 -_-@each $display, $font-size in $display-font-sizes { .display-#{$display} { @include font-size($font-size); font-weight: $display-font-weight; line-height: $display-line-height; }}  일단 bootstrap 폴더에서만 검색       $font-size가 정의된 파일이 없어서 폴더 내 전체 검색을 해봐도 정의된 내역은 없다...
CSS/Bootstrap 2025. 4. 9. 20:06
[Bootstrap] @use 'sass:map'; map.get(), map-get(), map-deep-get()

@use 'sass:map';.navigation { &-menu { display: flex; flex-wrap: wrap; #{ $self } { @include padding((map.get($navigation, padding-y) * 0.5) 0); width: map-deep-get($header, dropdown, width); border: none; border-radius: map-deep-get($header, dropdown, border-radius); box-shadow: $box-shadow; } #{ $self ..
CSS/Bootstrap 2025. 4. 8. 20:50
[Bootstrap] @use 'sass:list'; / Dart Sass(모듈 시스템) 사용법

@use 'sass:list';@function map-deep-set($map, $keys, $value) { $maps: ($map); $result: null; @for $i from length($maps) through 1 { $current-map: list.nth($maps, $i); $current-key: list.nth($keys, $i); $current-val: if($i == list.length($maps), $value, $result); $result: map.merge( $current-map, ( $current-key: $current-val,..
CSS/Bootstrap 2025. 4. 8. 20:44
[Bootstrap] $self: &; 중첩 구조에서의 사용 #{$self}

앞에서 봤을 땐 mixin 문법에서 사용하기 위해 $self: &를 사용한다고 했는데, 여기서도 사용하고 있어서 봤더니중첩 구조라서 확실하게 가져오기 위해 사용한다고 한다. 원본 SCSS.navigation { $self: &; // → '.navigation' &-menu { #{ $self } { // 여긴 '.navigation-menu .navigation'이 됨 } #{ $self }-link-extra { // 여긴 '.navigation-menu .navigation-link-extra'가 됨 } }} 컴파일 된 CSS.navigation-menu .navigation { /* ... */}.navigation-menu .navigation-li..
CSS/Bootstrap 2025. 4. 8. 19:36
[Bootstrap] &self: &; @mixin 사용 scss

👩🏻 알고 싶은 코드.navigation { $self: &; @mixin menu-item-visible($count) { .navigation.navigation-menu .navigation-item-more .navigation &:nth-child(-n + #{$count}), .navigation.navigation-menu > &:nth-child(n + #{$count + 1}) { display: none; } // stylelint-disable selector-max-specificity // stylelint-disable selector-max-class .navigation.navigation-menu > &.navigation-item-more { disp..
CSS/Bootstrap 2025. 4. 7. 20:24
[React] Bootstrap scss v5.1.3

** Bootstrap 최신 공식문서https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com ** Bootstrap v5.1.3 기본 공식문서https://getbootstrap.com/docs/5.1/getting-started/introduction/ IntroductionGet started with Bootstrap, ..
CSS/Bootstrap 2025. 4. 7. 19:48
Prev 1 Next