목록scss (3)

기록하는 개발자

scss에서의 media query 적용하기

졸업 프로젝트에서 반응형 웹사이트를 만들 때 Css에 media query를 적용했던 적이 있다. 새로운 프로젝트를 시작하면서부터는 scss를 사용하고 있는데, 이 scss 에서 media query를 적용하는 방법을 알아보자. _variables.scss $breakpoint-mobile: 335px; $breakpoint-tablet: 758px; $breakpoint-desktop: 1024px; Scss 에서는 css와 달리 변수 사용이 가능하다. “_variables.scss” 파일을 만들고 변수로 breakpoint를 선언해준다. 변수를 저장할 파일이기 때문에 언더바 “_” 로 파일명을 시작한다.(언더바로 시작하는 파일은 파일 단위로 분리되어 컴파일 되지 않는다.) mixin.scss @imp..
Web 2023. 4. 7. 14:06
[SCSS] SCSS의 rgba에 Opacity(투명도)적용하기

scss에서 색을 지정할 때 rgba형식에서 opacity 적용이 안되는데 아래와 같이 변수로 지정하여 넣어주면 rgba에서 opacity 사용이 가능하다. 결과화면 Main.js import "./main.scss"; const Main = () => { return ( Scss에서 rgba 사용 시 opacity 적용 방법입니다. ); }; export default Main; main.scss $custum-color: #000000; $custum-opacity: 0.5; .container { background-color: rgba($custum-color, $custum-opacity); width: 500px; height: 500px; margin: 0 auto; }
Web 2022. 10. 17. 17:40
css, sass, scss는 뭐가 다른걸까?

CSS(Cascading Style Sheets) css는 문서의 스타일을 구현하는 스타일 시트 언어이다. 프로그램의 크키가 커질수록 css 파일들이 지저분해지고, 유지보수가 힘들어지는 경험을 해본 적이 있다. 불필요한 선택자(Selector)의 과도한 사용과 연산 기능의 한계, 구문(Statement)의 부재 등이 그 이유이다. CSS 전처리기는 그러한 CSS 작업을 보다 쉽게 해주며 가독성과 재사용성을 높여 유지보수가 용이해지도록 도와준다. CSS 전처리기 위에서 설명한 CSS의 부족한 점들을 해결하기 위해 만들어졌다. 종류 : SASS(SCSS), Less, Stylus, PostCss 장점 - 재사용성 : 공통 요소 또는 반복적인 항목을 변수, 함수로 대체 가능하다. - 시간적 비용 감소 : 임의..
Web 2022. 8. 24. 16:26
이전 Prev 1 Next 다음