[cfinformatica-grup] Re: Frameworks CSS __sense__ JavaScript

  • From: Joan Josep Ordinas Rosa <jordinas@xxxxxxxxxxxxxxxxxxxxxxxxxxx>
  • To: cfinformatica-grup@xxxxxxxxxxxxx
  • Date: Mon, 12 Sep 2016 00:30:50 +0200

He pensat que pot ser ilustratiu comparar SASS amb un preprocessador de
proposit general com GPP.
És evident que SASS ha de ser per necessitat més potent, però veureu que en
aquest cas concret
GPP s'en surt força be.

L'original amb SASS:

    https://github.com/fadado/jqt/blob/master/docs/styles/new/button.css

La meva versió amb GPP:

    https://github.com/milligram/milligram/blob/master/src/_Button.sass

SI poseu les dos pàgines una al costat de l'altre podreu comparar força be.
La versió amb GPP té 45 línies més, de les que unes 30 son un comentari i
la definició
de macros.

Per si voleu veure aquí mateix qué es pot fer amb GPP us poso un parell
d'exemples:

=================================================

&define{&border_radius{radius}}{
  -webkit-border-radius: &radius;
     -moz-border-radius: &radius;
      -ms-border-radius: &radius;
          border-radius: &radius;
}

.box { &border_radius{10px} }

=================================================

&define{content}{
  background-color: black;
  color: white;
  &1
}

div {
  margin: 2em;
  &content{
      font-size: 12px;
      font-style: italic;
  }
}

=================================================

Naturalment, el millor és posar la definició de les macros en un fitxer
separat
i fer un "include" del mateix:

&include{theme.css}

Ah, la sintaxi de GPP és completament configurable.

JJOR

Other related posts: