Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- sentry
- 칭기즈칸의 위대한 장군 수부타이
- 뉴 컨피던스
- 레퍼런스 복사
- java
- Container
- 부자의그릇
- CSS
- kubernetes
- 모두가 기다리는 사람
- try-with-resources
- 비메모리 자원
- docker
- ESG
- 도파민형 인간
- colllection
- 아웃풋법칙
- 이펙티브 자바
- 과제의 분리
- 수부타이
- 참조 계수
- HTML
- node
- 쿠버네티스
- Infresh
- 히든 스토리
- 월칙
- apache kafka
- try width resources
- 공헌감
Archives
- Today
- Total
Hi
(sass) @mixin 본문
@mixin
_global.sass 파일 작성 (공통된 스타일 속성 파일)
$nav-height: 50px
@mixin backgroundImage($url)
background: url($url)
background-size: cover
@mixin small-button
width: 32px
height: 32px
border-radius: 50%
border: solid 1px #f00
@mixin inline-block
display: inline-block
vertical-align: top
@mixin border-radius($rt, $rb, $lb ,$lt)
border-bottom-left-radius: $lb
border-bottom-right-radius: $rb
border-top-right-radius: $rt
border-top-left-radius: $lt
style.sass (한 페이지의 스타일 파일)
@import "global"
아래는 그 페이지 코드
- 미디어 쿼리 기본
@media screen and (max-width: 1280px) and (min-width: 721px)
.content-field
background: #f00
@media screen and (max-width: 720px)
.content-field
background: #f0f
- @mixin을 이용한 _global.sass 내용
@mixin view-mobile
@media screen and (max-width: 480px)
@content
@mixin view-tablet
@media screen and (max-width: 960px)
@content
- style.sass(한 페이지 스타일)에 mixin 적용
@import "global"
@include view-tablet background: #f0f @include view-mobile background: #f00
'WEB(웹)' 카테고리의 다른 글
(css)속성값에다 스타일 적용 (0) | 2018.06.12 |
---|---|
(pug) extends (0) | 2018.06.12 |
(sass) scrollbar 안보이게 하는 법 (0) | 2018.06.11 |
(css) overflow (0) | 2018.06.09 |
search box 높이 조절 (0) | 2018.06.08 |