CSS를 사용하여 브라우저에서 CSS 디자인 편집하기

혹시 원했던 적이 있습니까? 직접 수정하기 브라우저에서 CSS 파일로 다시 전환하지 않고 한 가지 해결책은 Chrome 개발자 도구이지만 일부 개발자는 더 간단한 워크 플로우를 선호한다..

그게 어디야? CSS 조지 들어온다.이 무료 인 브라우저 편집 도구 공장 덜 맨 위에 그리고 그것은 간단한 자바 스크립트 파일.

대부분의 개발자는 브라우저 기반 편집기 모든 사람이 LESS 프리 D 파일러를 사용하지는 않기 때.입니다. 하지만 CSS George 덜 환경에서 실행됩니다. 신속하게 설치할 수있다. npm 경유.

npm이 설치되어 있으면이 간단한 코드를 실행하여 소스 파일을 추가하십시오. 현재 프로젝트에

 npm install --save-dev css-george 

또는 할 수 있습니다. 당기다 George.js 파일 GitHub에서 다른 모든 소스 파일과 함께 호스팅됩니다. 전체 프로젝트는 무료이며 오픈 소스이므로 전체 사본을 다운로드하십시오. npm을 사용하지 않으려는 경우 GitHub에서 가져 오기.

와 더불어 .js 파일을 사이트 헤더에 추가하면 시작할 수 있습니다. 조지 함수 실행 바로 브라우저에서. 에 편집기 창을여십시오., 대부분의 키보드의 상단 왼쪽 구석에있는 Shift + '에서 액세스 할 수있는 물결표 키를 클릭하십시오. 에이 새창 다음과 같이 표시되어야합니다.

이 화면에서 LESS 변수를 편집하십시오. 색상에서 글꼴 크기 또는 글꼴 모음에 이르기까지 모든 것에 사용됩니다..

이것은 LESS 플러그인의 위치입니다. 필요성이된다. 당신은 CSS George에게 말해야하기 때문에 포함 할 변수. 설정이 완료되면 CSS George 브라우저 편집기 열기 그리고 마을에 가라..

이 도구가 해서는 안된다. 런타임에 포함되다.. 특별히 방문자를 허용하지 않는 한 페이지 색상 및 스타일 편집, 일반적으로 좋은 생각은 아닙니다. 이 아니라면 지역 시험, CSS George는 모든 프론트 엔드 개발자를위한 유틸리티를 제공하는 드문 도구입니다..

너는 할 수있다. 살아있는 것을 보아라. CSS George 데모 페이지 또는 전체 사본을 다운로드하십시오. npm 또는 GitHub 레포를 통해.