errors with plugin

[yhwhdesign]

When I try to use the plugin in coda2.... It tells me it can not work with or recognize the @extend, @opacity, @include and others.

Is there a fix for this, or do I need ot delete those @tags and add them back in via css proper code....

[keegnotrub]

Do you have the scss file that is causing you a problem? Would it be possible to paste it here to see?

Thanks!

[yhwhdesign]

I have done that now, below…

! start of script !

$time: .3s; $arrSize: 32px;

@import 'mixins'; @import 'placeholders';

.fotorama { // /test/specs/initialization.js min-width: 1px; overflow: hidden;

&:not(.fotorama--unobtrusive) > *:not(:first-child) { display: none; } }

.fullscreen { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #000; }

.fotorama--fullscreen { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; float: none !important; z-index: 2147483647 !important; background: #000; width: 100% !important; height: 100% !important; margin: 0 !important; @extend %image-reset; .fotoramastage, .fotoramanav { background: #000; } }

.fotorama__wrap { -webkit-text-size-adjust: 100%; position: relative; @extend %no-select; direction: ltr;

• { // /test/specs/thumbs.js @extend %content-box; } }

.fotoramawrap--rtl { .fotoramastage__frame { direction: rtl; } }

//.fotoramawrap, //.fotoramastage, //.fotoramastageshaft, //.fotoramastageframe, //.fotorama__img { // //}

.fotoramastage, .fotoramanav { overflow: hidden; position: relative; max-width: 100%; }

.fotorama__wrap--pan-y { -ms-touch-action: pan-y; }

.fotoramastageshaft { @extend %stretch; @extend %no-tap; }

.fotoramawrap { .fotoramapointer { cursor: pointer; }

.fotorama__grab { @extend %grab-cursor; } }

.fotoramawrap--slide { .fotoramastage__frame { opacity: 1 !important; } }

.fotorama__grabbing * { @extend %grabbing-cursor; }

.fotoramastageframe { @extend %stretch; @extend %no-tap; overflow: hidden; &.fotorama__active { z-index: 8; } }

.fotoramawrap--fade { .fotoramastageframe { display: none; } .fotoramastageframe.fotoramaactive, .fotoramafade-front, .fotoramafade-rear { display: block; left: 0; top: 0; } .fotoramafade-front { z-index: 8; } .fotoramafade-rear { z-index: 7; &.fotoramaactive { z-index: 9; } } .fotoramastage .fotorama__shadow { display: none; } }

.fotoramaimg { @include opacity(0); @extend %image-reset; border: none !important; //overflow: hidden; @extend %stretch-for-fit; .fotoramaloaded &, .fotorama__error & { @include opacity(1); } }

.fotorama__img--full { display: none; }

.fotorama--fullscreen .fotoramaloaded--full { .fotoramaimg { display: none; } .fotorama__img--full { display: block; } }

.fotorama__html { @extend %stretch;

}

.fotoramawrap--only-active { .fotoramastage, .fotoramanav { max-width: 99999px !important; } .fotoramastageframe { visibility: hidden; } .fotoramastageframe.fotoramaactive { visibility: visible; } }

.fotorama__nav { font-size: 0; line-height: 0; text-align: center; display: none; white-space: nowrap; @extend %no-margin; @extend %no-tap; z-index: 5; }

.fotoramanavshaft { @extend %inline-block; position: relative; left: 0; top: 0; text-align: left; @extend %no-tap; }

.fotoramanavframe { @extend %inline-block; position: relative; @extend %no-margin; cursor: pointer; @extend %no-tap; }

.fotoramanav--dots { display: block; .fotoramanavframe { width: 18px; height: 30px; } .fotoramanavframe--thumb, .fotoramathumb-border { display: none; } }

.fotoramanav--thumbs { display: block; .fotoramanavframe { padding-left: 0 !important; &:last-child { padding-right: 0 !important; } } .fotoramanav__frame--dot { display: none; } }

@mixin dotColor($color) { .fotorama__dot { border-color: $color; }

.fotoramaactive .fotoramadot { background-color: $color; } }

.fotorama__dot { display: block; width: 4px; height: 4px; position: relative; top: 12px; left: 6px; border-radius: 6px; border: 1px solid; }

.fotoramanavframe.fotoramaactive { pointer-events: none; cursor: default; .fotoramadot { width: 6px; height: 6px; border: none; } }

@include dotColor(mix(black, white));

.fotorama__thumb { overflow: hidden; position: relative; width: 100%; height: 100%; @extend %before-load-bg; }

.fotorama__thumb-border { position: absolute; z-index: 9; top: 0; left: 0; border-style: solid; border-color: mix(#00d1ff, #008ed6); background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .25), rgba(64, 64, 64, .1)); }

.fotorama__caption { position: absolute; z-index: 12; bottom: 0; left: 0; right: 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #000; @extend %gpu;

a { text-decoration: none; color: #000; border-bottom: 1px solid; border-color: rgba(#000, .5); &:hover { color: #333; border-color: rgba(#333, .5); } }

.fotorama__wrap--rtl & { left: auto; right: 0; }

.fotoramawrap--video &, .fotoramawrap--no-captions & { display: none; } }

.fotoramacaptionwrap { background-color: #fff; background-color: rgba(#fff, .9); @extend %border-box; padding: 5px 10px; @extend %inline-block; }

.fotorama--hidden { @extend %hidden; }

@keyframes spinner { 0% { transform: rotate(0); } 100% { transform: rotate(360deg) } }

.fotorama__spinner { @extend %center; }

.fotoramawrap--css3 { .fotoramastageshaft, .fotoramanavshaft, .fotoramathumb-border { @extend %transition-for-slide; } .fotoramastageshaft, .fotoramanavshaft, .fotoramathumb-border { @extend %initial-translate; } .fotoramaspinner { animation: spinner 24s infinite linear; @extend %gpu; } .fotoramastage, .fotoramanav, .fotoramastageframe { @extend %gpu; } .fotoramastage .fotoramaimg, .fotorama__html { @extend %gpu; transition-property: opacity; transition-timing-function: linear; transition-duration: $time; } }

.fotoramawrap--video { .fotoramastageshaft, .fotoramastage, .fotoramastageframe--video { @extend %no-transform; } .fotoramastageframe--video { .fotoramaimg, .fotoramahtml { @extend %no-transform; @include opacity(0); } } }

.fotorama__select { @extend %select; cursor: auto; }

.fotorama__no-select { @extend %no-select; }

.fotorama__load { @extend %hidden; }

.fotorama__video { top: 32px; right: 0; bottom: 0; left: 0; position: absolute; z-index: 10; iframe { @extend %stretch; } }

/* Strange fix of the #66 issue (Firefox bug while sliding backwards) */ @-moz-document url-prefix(){ .fotorama__active { box-shadow: 0 0 0 transparent; } }

@import 'arrows'; @import 'shadows';

! end of script !

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Apr 2, 2014, at 10:07 AM, Jasen Burkett jburkett@arkansasonline.com wrote:

Sure thing… I have just attached it to this email.

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately. On Apr 2, 2014, at 10:04 AM, Ryan Krug notifications@github.com wrote: > Do you have the scss file that is causing you a problem? Would it be possible to paste it here to see? > > Thanks! > > — > Reply to this email directly or view it on GitHub.

[yhwhdesign]

here is the other two files that the plugin hangs on…

! mixins ! @mixin inline-block($va: middle) { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: $va; display: inline; zoom: 1; }

@mixin opacity($val: 1, $important: 0) { @if $important == 0 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val_100})"; filter: alpha(opacity = $val * 100); opacity: $val; } @else { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val_100})" !important; filter: alpha(opacity=$val*100) !important; opacity: $val !important; } } ! mixins !

! placeholder ! %stretch { position: absolute; width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; }

%image-reset { max-width: 99999px !important; max-height: 99999px !important; min-width: 0 !important; min-height: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }

%grab-cursor { cursor: move; cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; }

%grabbing-cursor { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; }

%center { position: absolute !important; top: 50% !important; left: 50% !important; }

%stretch-for-fit { @extend %center; margin: -50% 0 0 -50%; width: 100%; height: 100%; }

%initial-translate { transform: translate3d(0, 0, 0); }

%gpu { transform: translateZ(0); }

%no-transform { transform: none !important; }

%transition-for-slide { transition-property: transform; transition-timing-function: cubic-bezier(.1, 0, .25, 1); transition-duration: 0ms; }

%no-select { user-select: none; }

%select { user-select: text; }

%empty-bg { background: url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=); }

%no-margin { margin: 0; padding: 0; }

%inline-block { @include inline-block; }

%content-box { box-sizing: content-box; }

%border-box { box-sizing: border-box; }

%hidden { position: absolute; left: -99999px; top: -99999px; z-index: -1; }

%visible { position: relative; left: auto; top: auto; z-index: auto; opacity: 1; }

%no-tap { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

%transitionDuration { transition-duration: 333ms; }

%transitionDurationZero { transition-duration: 0ms; }

%sprite { background: url('fotorama.png') no-repeat; @media (#{-webkit-min-device-pixel-ratio}: 1.5), (min-resolution: 144dpi) { background: url('fotorama@2x.png') no-repeat; background-size: 96px 160px; } }

%before-load-bg { background-color: mix(black, white); background-color: rgba(mix(black, white), .2); } ! placeholder !

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Apr 2, 2014, at 10:10 AM, Ryan Krug notifications@github.com wrote:

You may have to paste it as I think attachments don't get processed:

8 (comment)

— Reply to this email directly or view it on GitHub.

[keegnotrub]

Cool thanks, I'll run it through Ruby sass and libsass (Ruby is like standard sass and libsass is the library this plugin uses) and try to see what is going on.

[yhwhdesign]

Awesome! I thank you. I am working with the fotorama github master file, and its giving me fits, and this was the first one that I could not figure out till I started doing some research and came across your plugin. thanks for making it!!!

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Apr 2, 2014, at 10:36 AM, Ryan Krug notifications@github.com wrote:

Cool thanks, I'll run it through Ruby sass and libsass (Ruby is like standard sass and libsass is the library this plugin uses) and try to see what is going on.

— Reply to this email directly or view it on GitHub.

[keegnotrub]

I set this up and had an issue with the opacity mixin. The library I use, libsass, seems to have an issue that while they've fixed haven't made an official release that contains the fix yet. In the meantime you might be able to change your opacity mixin to use unquote to get around the problem

What was this:

@mixin opacity($val: 1, $important: 0) {
  @if $important == 0 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val*100})";
    filter: alpha(opacity = $val * 100);
    opacity: $val;
  } @else {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val*100})" !important;
    filter: alpha(opacity=$val*100) !important;
    opacity: $val !important;
  }
}

Should compile if you change it to this (note the use of unquote)

@mixin opacity($val: 1, $important: 0) {
  @if $important == 0 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val*100})";
    filter: unquote("alpha(opacity=#{$val * 100})");
    opacity: $val;
  } @else {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val*100})" !important;
    filter: unquote("alpha(opacity=#{$val * 100})") !important;
    opacity: $val !important;
  }
}

See https://github.com/hcatlin/libsass/issues/72 for more information. Let me know if this addresses your issue.

[yhwhdesign]

I actually was able to get around it, however I had to use a different program. Time was an issue and I hate to say it, but I had to use code kit. but I only used it once, I use coda on a daily basis (coda2 to be exact) so when there is a new release that has a fix for it I will deff. download and install to use it.

Can you let me know when the new release is out?

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Apr 3, 2014, at 3:28 PM, Ryan Krug notifications@github.com wrote:

I set this up and had an issue with the opacity mixin. The library I use, libsass, seems to have an issue that while they've fixed haven't made an official release that contains the fix yet. In the meantime you might be abel to change your opacity mixing to use unquote to get around the problem

What was this:

@mixin opacity($val: 1, $important: 0) { @if $important == 0 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val_100})"; filter: alpha(opacity = $val * 100); opacity: $val; } @else { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val_100})" !important; filter: alpha(opacity=$val*100) !important; opacity: $val !important; } } Should compile if you change it to this (note the use of unquote)

@mixin opacity($val: 1, $important: 0) { @if $important == 0 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val_100})"; filter: unquote("alpha(opacity=#{$val * 100})"); opacity: $val; } @else { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val_100})" !important; filter: unquote("alpha(opacity=#{$val * 100})") !important; opacity: $val !important; } } — Reply to this email directly or view it on GitHub.

[keegnotrub]

I believe this should now be fixed with the latest release. Closing for now.