Susy2의 유체 그리드 시스템에서 정적 요소 너비를 만드는 방법

Question

저는 CSS와 프론트 엔드 스타일링을 처음 접했고 저는 Sass와 Susy2를 2 가지 프레임 워크로 선택했습니다.

내 susy 설정은 다음과 같습니다

$susy: (
     columns: 16, 
     gutters: 1/4, 
     column-width: 2rem, 
     output: isolate 
); 

그래서이 나에게 작업 할 16 개 유체 열을 제공합니다. 나는 breakpointing과 그 방법으로 내용을 이동하는 것을 이해하지만 정적 폭을 가진 요소를 정의하는 방법이 있는가? 아니면 이것이 최선의 관행이 아닌가?

예를 들어, 내 메뉴 버튼과 다른 최상위 네비게이션 요소를 페이지 축소 및 확대를 유지하고 싶습니다.

유동적 인 디자인에 익숙하지 않아 @span을 사용하는 컨테이너를 만들고 그 안에 정적 너비 요소를 만들어야하는지 잘 모르겠습니까? 그것은 내 자신의 요소에 @span을 가지고 싶었던 html에 여분의 레이어를 추가하는 것처럼 보입니다.

Answer 1

이 여기에 세부 사항에 대해 언급하기 어렵다, 그래서 더 일반적인 모범 사례의 질문에 답하려고합니다 :

• 그것은 가능하지만, 유체 레이아웃 내부의 정적 요소를 포함하기 어려울 수 있습니다 . Susy가 있든 없든 사실입니다. 그것이 얼마나 어려운지는 원하는 레이아웃/응답성에 달려 있습니다. 그러나 Susy는 어떤 방식 으로든 실제 의견을 갖고 있지 않습니다.
• 요소가 축소/확장되지 않으면 너무 많은 부분이있을 때 추가 공간이 생기면 더 이상 적합하지 않게되고 요소는 더 이상 적합하지 않을 때 요소가 어떻게되는지 결정해야합니다.
• Susy는 유체 대 혼합 유체에 대한 실제 의견이 없습니다.하지만 Susy가 혼합 된 그리드를 계산할 방법은 없지만 여전히 단일 그리드로 이해하고 있습니다. 정적 및 유체 혼합은 정의에 의해 그리드를 깨는 것입니다. 당신은 그것을 할 수 있고, Susy는 그 차이를 알지 못할 것입니다. 그러나 당신은 두들겨 진 길을 벗어났습니다.
• Susy는 주로 레이아웃 수식 계산기이며 CSS 레이아웃을 설정하기위한 몇 가지 추가 바로 가기가 있습니다. span에 관한 마법이나 요구 사항은 없으므로 유용 할 수있는 곳이면 어디서든 사용할 수 있으므로 방해가 될 때 사용하지 마십시오.

기본적으로 Susy는 원하는만큼 유연하도록 제작되었습니다. 각 Susy mixin은 특정 레이아웃 관련 CSS에 대한 바로 가기를 제공하며 원하는대로 사용할 수 있습니다. Susy 함수를 사용하면 수학에 직접 액세스 할 수 있으므로 적합하다고 생각하는 경우 사용할 수 있습니다.