# scss

163개의 포스트
post-thumbnail

유지보수 시 편한 스위치 만들기

실무에서 프로젝트 진행하다가 갑자기(?!) 고객사가 스타일 변경을 요청했을 때, width 하나 바꿔 달라는데 다른 속성도 변경해야하는 일이 생긴 적 있으신가요? 스위치의 경우에서 SASS로 해결해봅시다!!

2021년 7월 21일
·
0개의 댓글

2. SCSS 주요문법

자식태그에 각각 다른 블럭을 만들어 쓸 필요가 없음축약형으로 묶을 수 있음 → xxx-yyy 식일 때, 앞에 xxx가 같은거 묶어서 쓰는거 가능상위 요소 이어쓰기는 "&"로! 클래스명 등, 글자도 이어쓸 수 있음문자열을 치환할 수 있음 (즉, 변수를 쓸 수 있음)반복되

2021년 7월 21일
·
2개의 댓글
post-thumbnail

1. React에서 SCSS 사용환경 만들기

yarn add styled-components 배시에 명령어 입력하기style.css 파일이 있어야지 변환이 됨자식태그에 각각 다른 블럭을 만들어 쓸 필요가 없음축약형으로 묶을 수 있음 → xxx-yyy 식일 때, 앞에 xxx가 같은거 묶어서 쓰는거 가능상위 요소 이

2021년 7월 21일
·
0개의 댓글

스파르타 코딩클럽 - 리액트 2주차(1)

간단하게 말하자면 SCSS와 SASS는 CSS를 편하게 쓰도록 도와주는 친구이다. SCSS는 SASS의 3번째 버전에서 추가된 친구인데, SASS의 모든 기능을 쓸 수 있고 CSS와 호환도 잘 되어있는 친구이다.SASS, SCSS 공식문서링크텍스트SASS, SCSS 테

2021년 7월 21일
·
0개의 댓글

Scss에 익숙한 분들을 위한 간단 styled-component 사용법

Scss, Sass를 사용할 땐 아래와 같이 사용했을 것이다!하지만 styled-component는 다음과 같이 사용한다.

2021년 7월 20일
·
0개의 댓글
post-thumbnail

React | React, Scss로 변환 중...

html, css를 React, scss로 변환했는데왼쪽 박스가 저렇게 틀어졌다. 아무리 고쳐도 꿈쩍도 안한다 ㅎㅎ몇시간을 끙끙거리다가 팀원인 의연님한테 여쭤봤더니왼쪽과 오른쪽 박스 2개를 한 <div>로 묶어보라고 조언해주셨다!덕분에 해결완료~★우리 팀 킹왕짱능

2021년 6월 23일
·
0개의 댓글
post-thumbnail

TIL | 18 SASS

SASS

2021년 6월 23일
·
0개의 댓글
post-thumbnail

[Vue] scss 추가 및 전역 스타일 설정

Vue cli3 이상부터는 프로젝트를 생성할 때 scss 관련 기능을 쉽게 추가할 수 있습니다. 하지만 프로젝트 진행 중간에 scss를 적용할 일이 생겨 해당 내용을 정리하였습니다 🙂제일 먼저 해당 package에 node-sass와 sass-loader를 설치해줍니

2021년 6월 23일
·
0개의 댓글
post-thumbnail

TIL | Sass(Syntactically Awesome Style Sheets)

CSS의 단점을 보완하기 위해 나온 Sass에 대해 알아보자! Sass >Syntactically Awesome Stylesheets의 약자. 스타일시트 언어. CSS의 단점을 보완하기 위한 CSS의 확장으로 나온 스크립트 언어. CSS의 전처리기, 즉 해석되어 C

2021년 6월 23일
·
0개의 댓글
post-thumbnail

Dark Mode ⚫

일단 다크모드를 구현할려는 이유는 프로그래머스 과제에서 본적이 있었는데 실제로 구현하지 못하였습니다. 그것에 대한 자괴감이 들어서 이번에 시간이 되서 React에서 구현 해보기로 했습니다.변수를 선언하여 해당 요소 color를 변수 값을 넣어주는 방식으로 진행했습니다.

2021년 6월 22일
·
0개의 댓글

sass, scss 번들링

package.json webpack.config.js 참고 https://heropy.blog/2017/10/18/webpack\1\start\ejs\sass/

2021년 6월 22일
·
0개의 댓글
post-thumbnail

sass란?

우리가 css로 작업을 할 때, 같은 코드를 반복해서 쓰거나 연산을 활용해야 하는 경우 css만으로는 불편함을 느껴보신 적 있으시죠?Sass(Syntactically Awesome Style Sheets)는 css의 전처리기(CSS pre-processor)라고 흔히

2021년 6월 14일
·
0개의 댓글

오늘 배운 CSS 지식

금일 배운 CSS 지식에 대해 간단하게 요약한 글입니다.

2021년 6월 9일
·
0개의 댓글
post-thumbnail

SCSS - 색상 내장함수

시작 전 사담sass(scss) 공부도 하기전부터 최고라는 얘기를 많이 들었기에 굉장히 부푼기대를 안고 배우는중이다. 동영상 강의를 듣는데 이거 진짜 누가 정리 잘 해서 책으로 내도 좋겠다는 생각이든다. (이미 있다면 추천 좀)벨로그 게시글을 몇번쓰고 날아가기를 반복해

2021년 6월 7일
·
0개의 댓글

내가 보려고 쓰는 SCSS 문법 정리

업무 할 때 자주 쓰는 SCSS 문법 정리https://beautifytools.com/css-to-scss-converter.php (⭐⭐⭐내가 주로 쓰는 사이트)https://css2sass.herokuapp.com/https://json

2021년 5월 31일
·
0개의 댓글
post-thumbnail

React에서 Styled components로 스타일링 하기

Styled components로 우아하게 스타일링 해봅시다!

2021년 5월 31일
·
2개의 댓글

Scss(sass) debugging and Breaking Change: Slash as Division

Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any gi

2021년 5월 26일
·
0개의 댓글
post-thumbnail

Sass(SCSS)-5

javascript와 순서는 동일하다. 그러나 간단하게 표기한다.if(조건, true시 실행, false시 실행)relative로는 position을 이용해서 가운데 정렬을 할 수 없기 때문에 if문이 실행되지 않게 한다.to로 하면 -1을 적용해줘야 한다.@each

2021년 5월 24일
·
0개의 댓글
post-thumbnail

Sass(SCSS)-4

반드시 앞 문자에 쌍따음표가 붙어있어야지 더하는 문자열에 쌍따음표가 없어도하나의 문자열로 나온다.@if를 이용해서 조건을 걸 수 있다.반대는 @if not() {}이 있다.

2021년 5월 24일
·
0개의 댓글