Calvin Juárez calvinjuarez

Setup

git clone <repo>

clone the repository specified by ; this is similar to "checkout" in some other version control systems such as Subversion and CVS

Add colors to your ~/.gitconfig file:

Less Value Accessors: `@{}` & `${}`

The files here provide examples of the variable and property accessor syntax currently being discussed at [less.js#1848][#1848].

@{ #ns > var }
${ prop }
${ #ns > prop }

I think there are two questions to answer:

Does the anticipated frequency of use for the Selector Function merit using a symbol over a more semantic, explicit function name?
Are there any compelling arguments for either the Selector Function or the Property Accessor to use any other particular symbol, or for either to use $ specifically?

In @lukeapage's comment, he mentions that there are open issues about assigning CSS selectors to variables, which I think is in reference to #1421 & the issues referencing & referenced by it. I think that "assigning CSS selectors to variables" is likely the primary use case for a "parse this as a selector" function.

Grouping Media Queries in Less with "Backwards Mixins"

backwards mixin: a mixin defined many times and called once, rather than defined once and called many times

This is a demo of one way you could use mixins to put all your media query rules together under a single @media statement. The merits of grouping media queries are dubious, but it's a good illustration of how to use backwards mixins.

How It Works

In Less, when a mixin is called it will output the results of all mixins that match the pattern established by the call.

CSS Property Order

My personal CSS Property order is currently as follows.

content and other esoteric stuff
display
flex
  flex-direction
 align-items

Less Port of Bootstrap 4s Media Query Mixins

See http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints.

Ports Bootstrap 4's _breakpoints.scss to Less.

Tested with less2css.org. [View the working test](http://less2css.org/#%7B%22less%22%3A%22%40import%20(reference)%20'https%3A%2F%2Fgist.githubusercontent.com%2Fcalvinjuarez%2F8c16251af9cfe8206105eaf695b9218e%2Fraw%2F7079347677e4089c061e03e7803f857a242fc9ca%2F2._variables.less'%3B%5Cn%40import%20(reference)%20'https%3A%2F%2Fgist.githubusercontent.com%2Fcalvinjuarez%2F8c16251af9cfe8206105eaf695b9218e%2Fraw%2F7079347677e4089c061e03e7803f857a242fc9ca%2F3._breakpoints.less'%3B%5Cn%2F*%20.media-breakpoint-up()%20test%20*%2F%5Cn.up%20%7B%5Cn%20%20.media-breakpoint-up(xs%3B%20%7B%5Cn%20%20%5Ct-less-size%3A%20xs%3B%5Cn%20%20%7D)%3B%5Cn%20%20.media-breakpoint-up(sm%3B%20%7B%5Cn%20%20%5Ct-less-size%3A%20sm%3B%5Cn%20%20%7D)%3B%5Cn%7D%5Cn%2F*%20.media-breakpoint-down()%2

Preferred Order of HTML Attributes

When under my control, I like to order HTML attributes in this way.

Identifiers
- class
- id
- type
- for

name

	.example-1,
	.example-2,
	.example-3,
	.example-4,
	.example-5 {
	/* stuff */

	}

	//
	// variables.fonts.less
	//

	@font-headings: "Some Character-limited Font";
	@font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;


	//
	// fonts.less

	[alias]
	branch-latest = "! git-branch-latest() { if [[ $1 == \"-r\" ]]; then for branch in `git branch -r \| grep -v HEAD`;do echo `git show -s --oneline --format=\"%Cblue%ci%Creset\" $branch \| head -n 1` \"\t$branch\"; done \| sort -r; else git for-each-ref --sort=-committerdate --format=\"%(color:blue)%(committerdate:iso)%(color:reset)%09%(refname:short)\" refs/heads/; fi }; git-branch-latest"