올드 CSS를 덜 변환하는 방법

우리는 이전 게시물에서 LESS에 대한 기본 사항을 많이 다루었습니다. LESS 시리즈를 따르고 계시다면,이 시점에서 귀하는 이미 귀하의 변수, 믹스 인 과 조작 있음.

우리는 또한 앱을 사용하거나 컴파일러를 사용하여 LESS를 일반 CSS로 변환하는 방법에 대해서도 언급했습니다. 그러나 우리는 어떻게 그 반대를 할 것인가? CSS를 덜 변환 하시겠습니까? 자,이 팁은 당신을위한 것입니다..

도구 사용

인기의 증가와 함께 CSS 전처리 기, CSS2Less와 같은 웹 디자이너 또는 개발자의 삶을 편하게 만드는 것을 목표로하는 새로운 도구 및 앱.

이 도구를 사용하면 일반 CSS를 LESS로 변환 할 수 있습니다. 자, 한번 시도 해보자. 이전의 파일에서 다음 CSS 규칙을 변환해야합니다..

 nav 높이 : 40px; 너비 : 100 %; 배경 : # 000; border-bottom : 2 픽셀 단색 #fff;  nav ul 패딩 : 0; 여백 : 0 자동;  nav li 디스플레이 : 인라인; 왼쪽으로 뜨다;  nav a 색상 : #fff; 디스플레이 : 인라인 블록; 너비 : 100px; 텍스트 그림자 : 1px 1px 0px # 000;  nav li a 국경 - 오른쪽 : 1 픽셀 고체 #fff; 박스 크기 : border-box;  nav li : 마지막 자식 a border-right : 0;  nav a : 마우스를 올리면 nav a : 활성 background-color : #fff;  

결과는 다음과 같습니다..

 nav a : 호버 (hover), nav a : 활성 background-color : #fff;  nav 높이 : 40 픽셀; 너비 : 100 %; 배경 : # 000; border-bottom : 2 픽셀 단색 #fff; a color : #fff; 디스플레이 : 인라인 블록; 너비 : 100px; 텍스트 그림자 : 1px 1px 0px # 000;  ul 패딩 : 0; 여백 : 0 자동;  li : 마지막 자식 a border-right : 0;  li display : 인라인; 왼쪽으로 뜨다; a 국경 - 오른쪽 : 1 픽셀 고체 #fff; 박스 크기 : border-box;  

위에서 볼 수 있듯이 이전의 CSS는 LESS와 같이 중첩되어 있습니다..

한정

그러나 변환 결과에 몇 가지 제한 사항이 있음을 알 수 있습니다. 예전의 CSS에서는 몇 가지 동일한 색상을 사용합니다. 예를 들어 두 가지 선언문 border-bottom : 2 픽셀 단색 #fff; 과 국경 - 오른쪽 : 1 픽셀 단색 #fff; 우리는 흰색 테두리를 가지고 있습니다. LESS에서는이 상수 값을 실제로 저장할 수 있습니다. 변하기 쉬운.

또한 중첩하지 않고 의사 * 다음 규칙과 같이 앰퍼샌드 (&) 기호로 li : 막내 아이 과 탐색 a : 가리 키기, 탐색 a : 활성. 그들은 그대로 그대로 있으며, 우리는 규칙 집합을 실제로 이렇게 단순화 할 수 있습니다.

 li & : first-child  a & : hover  & : active  

결론

현재 가지고있는 한계에도 불구하고,이 도구는 CSS 규칙 세트를 중첩하기위한 시간을 절약하는 데 매우 도움이 될 수 있습니다. 수동으로 나머지 작업 만 수행하면됩니다. 아마도 위의 제한 사항이 해결 된.