본문 바로가기
  • 커뮤니티
  • 북마크

Front-end/CSS(sass,scss)4

[SASS]vscode sass 컴파일 경로 설정하기 vscode에서 Live Sass Compiler를 통한 sass 컴파일 경로 설정하는 방법입니다. Live Sass Compiler 설정파일에서 해당부분을 찾아서 수정해줍니다. "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/.." }, { "format": "compressed", "extensionName": ".min.css", "savePath": "~/.." } ], savePath에서 설정하시면 됩니다. "savePath": null (현재 .sass파일에 .css생성) "savePath": "~/" (현재 위치로 부터의 상대경로) "savePath": "/".. 2023. 1. 21.
[SASS]vscode Live Sass Compiler 컴파일 안될때 설정 vscode에서 sass를 쉽고 간편하게 컴파일 해주는 Live Sass Compiler 확장프로그램이 있습니다. node.js와 sass를 이상없이 설치했는데, vscode에서 Live Sass Compiler로 컴파일이 안됐을때는 settings.json 파일을 확인해보셔야합니다. 참고로 node-sass 버전은 아래와 같습니다. node-sass 8.0.0 (Wrapper) [JavaScript] libsass 3.5.5 (Sass Compiler) [C/C++] 먼저 Live Sass Compiler 실행을 했는지 살펴보세요. 실행 방법은 vscode 하단에 Watch Sass로 되어있는걸, 클릭하면 Watching...로 변경됩니다. 출력창을 보시면 Watching... 으로 메시지가 보입니다... 2023. 1. 21.
[SASS]npm install node-sass 설치 에러, node.js 버전 확인 SASS 설치시 (npm install node-sass) 오류가 발생하면, 설치된 node.js 버전이 node-sass 버전을 지원하지 않을 가능성이 크다. node.js 버전이 호환되는 node-sass 버전표를 참고해보자. NodeJS Supported node-sass version Node Module Node 19 8.0+ 111 Node 18 8.0+ 108 Node 17 7.0+, 2023. 1. 18.
[CSS]세로 두줄이상일때 말줄임 처리하기 예전에는 제목이나 글자수를 ... 줄일때는 개발에서 처리를 했었습니다. CSS에서 기능이 지원되면서 한줄 말줄임은 대부분 CSS에서 처리를 하게 되었습니다. 가끔 두줄일때도 말줄임을 할때가 있는데요. 그럴땐 아래처럼 하시면 됩니다. text{height:50px;text-overflow:ellipsis;word-wrap:break-word;display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} -webkit-line-clamp:2; 두줄일땐 2, 세줄일땐 3으로 하시면 됩니다. (세로 높이값은 꼭 넣어야합니다.) 위처럼 두줄일때 말줄임... 처리가 됩니다. 만약 한줄일경우는 아래처럼 하시면 됩니다. .te.. 2021. 3. 29.